/* wavedash: Forgejo's dark theme recoloured to the site's purple, with the site's backdrop (the
   gradient, the soft blobs, the mountain) behind the page.
   Installed as custom/public/assets/css/theme-wavedash.css and listed in [ui] THEMES (see compose.yaml).
   Only colours and the backdrop are set, so a Forgejo update keeps working. */
@import "./theme-forgejo-dark.css";

:root {
  --color-primary: #b077e0;
  --color-primary-contrast: #1a0928;
  --color-primary-dark-1: #bb88e6;
  --color-primary-dark-2: #c799ec;
  --color-primary-dark-3: #d3aaf1;
  --color-primary-light-1: #9a5bc8;
  --color-primary-light-2: #8a4bb8;
  --color-primary-light-3: #7a3fa8;
  --color-primary-alpha-10: #b077e01a;
  --color-primary-alpha-20: #b077e033;
  --color-primary-alpha-30: #b077e04d;
  --color-primary-alpha-40: #b077e066;
  --color-primary-alpha-50: #b077e080;
  --color-primary-hover: var(--color-primary-dark-1);
  --color-primary-active: var(--color-primary-dark-2);

  --color-body: #2a0d3f;
  --color-nav-bg: #2a0f40cc;
  --color-nav-hover-bg: #3a1659;
  --color-header-wrapper: #2a0f40cc;
  --color-footer: #1a0928cc;
  --color-box-header: #2f1347e6;
  --color-box-body: #1a0928b3;
  --color-box-body-highlight: #2f1347cc;
  --color-card: #1a0928b3;
  --color-menu: #1a0928b3;
  --color-input-background: #1a0928;
  --color-secondary: #4a2a66;
  --color-secondary-dark-1: #5b3a7a;
  --color-secondary-light-1: #3a1f52;
  --color-text: #f7f1fb;
  --color-text-light: #d9c8e6;
  --color-text-light-1: #c8b5d6;
  --color-text-light-2: #b09cc2;
  --color-text-light-3: #8f7ba3;
  --color-border: #ffffff24;
  --color-light-border: #ffffff1a;
}

/* The backdrop, the same as on wavedash.eu (assets/site.css there): drifting blobs, film grain and
   the mountain, which moves with the scroll (wavedash-scene.js). The markup is
   templates/custom/footer.tmpl, the script is loaded from templates/custom/header.tmpl. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(135deg, var(--bd-dark-1), var(--bd-dark-2));
}

/* Time of day, as on wavedash.eu (the long comment is in assets/site.css there): wavedash-scene.js
   sets data-tod on <html>, the colours below follow it. git is shifted towards blue (--svc-h and
   --svc-mt, the same shift for the mountain picture in degrees), so each service has its own tint.
   Every part stays dark because the text is light. Browsers without oklch keep the purple hex values. */
:root {
  --bd-dark-1: #2a0d3f; --bd-dark-2: #3d1556;
  --bd-blob-1: #8a45b8; --bd-blob-2: #5b2a9a; --bd-blob-3: #b0529e; --bd-blob-4: #4a2a8c;
  --tod-h: 312; --tod-l: 0; --tod-d: 0;
  --tod-mt: 0; --tod-mt-b: 1;
  --svc-h: -55; --svc-mt: -45;
  --stars: 0.9;
  --orb-x: 18%; --orb-y: 15%;
  --orb-core: #f1e6fb; --orb-glow: rgb(205 180 230 / 0.32);
}
html[data-tod="dawn"] { --tod-h: 345; --tod-l: 0.03; --tod-d: 0.02; --tod-mt: 30; --tod-mt-b: 1.1; --stars: 0.25; --orb-x: 12%; --orb-y: 23%; --orb-core: #ffd9c2; --orb-glow: rgb(255 150 120 / 0.34); }
html[data-tod="day"]  { --tod-h: 282; --tod-l: 0.05; --tod-d: 0.05; --tod-mt: -28; --tod-mt-b: 1.12; --stars: 0; --orb-x: 36%; --orb-y: 11%; --orb-core: #fff3d6; --orb-glow: rgb(255 235 190 / 0.26); }
html[data-tod="dusk"] { --tod-h: 335; --tod-l: 0.03; --tod-d: 0.03; --tod-mt: 50; --tod-mt-b: 1.05; --stars: 0.35; --orb-x: 7%; --orb-y: 24%; --orb-core: #ffc58a; --orb-glow: rgb(255 130 90 / 0.38); }
@supports (color: oklch(0.5 0.1 100)) {
  :root {
    --bd-dark-1: oklch(calc(0.20 + var(--tod-d)) 0.09 calc(var(--tod-h) + var(--svc-h)));
    --bd-dark-2: oklch(calc(0.27 + var(--tod-d)) 0.11 calc(var(--tod-h) + var(--svc-h)));
    --bd-blob-1: oklch(calc(0.54 + var(--tod-l)) 0.17 calc(var(--tod-h) + var(--svc-h)));
    --bd-blob-2: oklch(calc(0.40 + var(--tod-l)) 0.17 calc(var(--tod-h) + var(--svc-h) - 20));
    --bd-blob-3: oklch(calc(0.57 + var(--tod-l)) 0.16 calc(var(--tod-h) + var(--svc-h) + 25));
    --bd-blob-4: oklch(calc(0.37 + var(--tod-l)) 0.15 calc(var(--tod-h) + var(--svc-h) - 30));
  }
}
/* The sky: stars and the moon or sun, behind the blobs. */
.backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--orb-x) var(--orb-y), var(--orb-core) 0 1rem, var(--orb-glow) 1.2rem, transparent 9rem),
    radial-gradient(1.5px 1.5px at 8% 12%, rgb(255 255 255 / var(--stars)) 50%, transparent 52%),
    radial-gradient(1px 1px at 14% 31%, rgb(255 255 255 / var(--stars)) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 27% 8%, rgb(255 255 255 / var(--stars)) 50%, transparent 52%),
    radial-gradient(1px 1px at 33% 24%, rgb(255 255 255 / var(--stars)) 50%, transparent 52%),
    radial-gradient(1px 1px at 41% 40%, rgb(255 255 255 / var(--stars)) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 46% 14%, rgb(255 255 255 / var(--stars)) 50%, transparent 52%),
    radial-gradient(1px 1px at 55% 33%, rgb(255 255 255 / var(--stars)) 50%, transparent 52%),
    radial-gradient(1px 1px at 61% 6%, rgb(255 255 255 / var(--stars)) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 68% 21%, rgb(255 255 255 / var(--stars)) 50%, transparent 52%),
    radial-gradient(1px 1px at 5% 52%, rgb(255 255 255 / var(--stars)) 50%, transparent 52%),
    radial-gradient(1px 1px at 22% 47%, rgb(255 255 255 / var(--stars)) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 38% 58%, rgb(255 255 255 / var(--stars)) 50%, transparent 52%),
    radial-gradient(1px 1px at 52% 50%, rgb(255 255 255 / var(--stars)) 50%, transparent 52%),
    radial-gradient(1px 1px at 74% 38%, rgb(255 255 255 / var(--stars)) 50%, transparent 52%);
}
.backdrop .blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  will-change: transform;
  animation: wd-drift calc(38s * var(--loop, 1)) ease-in-out infinite alternate;
  animation-delay: calc(var(--phase, 0) * -1ms);
}
.backdrop .blob-1 { --loop: 1;   width: 80vmax; height: 80vmax; left: -15vmax;  top: -25vmax;    background: radial-gradient(closest-side, var(--bd-blob-1), transparent); }
.backdrop .blob-2 { --loop: 1.3; width: 70vmax; height: 70vmax; right: -20vmax; top: 5vmax;      background: radial-gradient(closest-side, var(--bd-blob-2), transparent); }
.backdrop .blob-3 { --loop: 0.8; width: 50vmax; height: 50vmax; left: 10vmax;   bottom: -25vmax; background: radial-gradient(closest-side, var(--bd-blob-3), transparent); }
.backdrop .blob-4 { --loop: 1.6; width: 60vmax; height: 60vmax; right: 5vmax;   bottom: -30vmax; background: radial-gradient(closest-side, var(--bd-blob-4), transparent); }
@keyframes wd-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(12vmax, 8vmax) scale(1.18); }
}
.backdrop .grain {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.backdrop .mountain {
  /* The same as on wavedash.eu (see assets/site.css there): a layer exactly the shape of the picture
     (1000 by 1700), at least as tall as the screen, and a parallax that never lifts its bottom edge
     into view (on a phone it used to, leaving the lower half of the screen without a mountain). */
  --mt-top: 6rem;
  --mt-w: max(min(78vw, 70rem), calc((100vh - var(--mt-top)) / 1.7));
  position: absolute;
  top: var(--mt-top);
  right: 0;
  width: var(--mt-w);
  aspect-ratio: 1000 / 1700;
  background: url("/assets/img/mountain.svg") no-repeat center / 100% 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 35%);
  mask-image: linear-gradient(to right, transparent 0, #000 35%);
  transform: translate3d(0, min(0px, max(calc(var(--scroll, 0) * -0.45px), calc(100vh - var(--mt-top) - var(--mt-w) * 1.7))), 0);
  will-change: transform;
  filter: hue-rotate(calc((var(--tod-mt) + var(--svc-mt)) * 1deg)) brightness(var(--tod-mt-b));
}
@media (max-width: 767px) {
  .backdrop .mountain { --mt-top: 5rem; --mt-w: max(118vw, calc((100vh - 5rem) / 1.7)); right: -14vw; opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .backdrop .blob { animation: none; }
  .backdrop .mountain { transform: none; }
}

/* Forgejo draws most pages (the feed, lists, file views) straight on the page, so over the mountain
   the text had nothing behind it. The content column gets the site's translucent dark panel. The
   mountain still shows in the margins on a wide screen and on the start page. */
.page-content:not(.home) > .ui.container,
.page-content:not(.home) > .ui.grid,
.page-content:not(.home) > .ui.stackable {
  background: var(--wd-panel, rgb(26 9 40 / 0.62));
  padding: 0.75rem 0.5rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* The start page (templates/home.tmpl). */
.page-content.home .wd-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 18vh 1.5rem 4rem;
}
.page-content.home .wd-hero img { width: 5.5rem; height: 5.5rem; }
.page-content.home .wd-hero h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); margin: 0; }
.page-content.home .wd-hero p { margin: 0; max-width: 28rem; color: var(--color-text-light-1); font-size: 1.1rem; }
.page-content.home .wd-hero .ui.button { margin-top: 0.75rem; }

/* The interface follows the backdrop's hue (the time of day plus git's blue), so nothing is purple
   by accident: only the logo and favicon are. Same lightness steps as the purple values at the top,
   which stay as the fallback for browsers without oklch. */
@supports (color: oklch(0.5 0.1 100)) {
  :root {
    --h: calc(var(--tod-h) + var(--svc-h));
    --color-primary: oklch(0.72 0.12 var(--h));
    --color-primary-contrast: oklch(0.18 0.05 var(--h));
    --color-primary-dark-1: oklch(0.77 0.11 var(--h));
    --color-primary-dark-2: oklch(0.81 0.1 var(--h));
    --color-primary-dark-3: oklch(0.85 0.09 var(--h));
    --color-primary-light-1: oklch(0.64 0.13 var(--h));
    --color-primary-light-2: oklch(0.56 0.14 var(--h));
    --color-primary-light-3: oklch(0.5 0.14 var(--h));
    --color-primary-alpha-10: oklch(0.72 0.12 var(--h) / 0.1);
    --color-primary-alpha-20: oklch(0.72 0.12 var(--h) / 0.2);
    --color-primary-alpha-30: oklch(0.72 0.12 var(--h) / 0.3);
    --color-primary-alpha-40: oklch(0.72 0.12 var(--h) / 0.4);
    --color-primary-alpha-50: oklch(0.72 0.12 var(--h) / 0.5);

    --color-body: var(--bd-dark-1);
    --color-nav-bg: oklch(0.22 0.07 var(--h) / 0.8);
    --color-nav-hover-bg: oklch(0.3 0.09 var(--h));
    --color-header-wrapper: oklch(0.22 0.07 var(--h) / 0.8);
    --color-footer: oklch(0.17 0.06 var(--h) / 0.8);
    --color-box-header: oklch(0.25 0.08 var(--h) / 0.9);
    --color-box-body: oklch(0.17 0.06 var(--h) / 0.7);
    --color-box-body-highlight: oklch(0.25 0.08 var(--h) / 0.8);
    --color-card: oklch(0.17 0.06 var(--h) / 0.7);
    --color-menu: oklch(0.17 0.06 var(--h) / 0.7);
    --color-input-background: oklch(0.15 0.05 var(--h));
    --color-secondary: oklch(0.34 0.07 var(--h));
    --color-secondary-dark-1: oklch(0.4 0.07 var(--h));
    --color-secondary-light-1: oklch(0.27 0.06 var(--h));
    --color-text: oklch(0.96 0.01 var(--h));
    --color-text-light: oklch(0.88 0.02 var(--h));
    --color-text-light-1: oklch(0.82 0.03 var(--h));
    --color-text-light-2: oklch(0.74 0.03 var(--h));
    --color-text-light-3: oklch(0.66 0.03 var(--h));
    --wd-panel: oklch(0.16 0.06 var(--h) / 0.62);
  }
}