@import url(fonts/inter/inter.css);
@import url(fonts/ftaurebesh/ftaurebesh.css);

:root {
  font-size: 16px;
  font-size: clamp(16px, 8px + 1.5vw, 24px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  flex-grow: 1;
  padding: 0;
  line-height: 1.5;
}

body {
  --c-highlight: hsl(0 0% 100% / 87.5%);
  --c-dark: hsl(217 17% 21%);
  --c-accent: hsl(14 62% 53%);
  --c-light: #859cc4;
  --c-text-background-light: hsl(0 0% 95% / 60%);

  --c-text-light: var(--c-highlight);
  --c-text-dark: var(--c-dark);

  --ratio: 1.333;
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --content-width: clamp(75vw, 40rem, 100vw - 3rem);
  --inset: calc(50vw - var(--content-width) / 2);
  --cloudyHeaderBottom: max(35vh, 10rem);
  background-size: 100% 80vh;
  background-position: top;
  background-repeat: no-repeat;
  background-color: var(--c-light);
  background-image: linear-gradient(to bottom, #4379ef, #859cc4);
}
body[data-theme="dark"] {
  background: var(--c-light);
}

[data-theme="dark"] {
  --c-highlight: hsl(60 20% 60% / 50%);
  --c-dark: hsl(217 9% 8%);
  --c-accent: hsl(220 20% 35%);
  --c-light: hsl(220 50% 10%);

  --c-text-background-light: hsl(220 40% 10% / 40%);
  --c-text-light: hsl(60 50% 86.67%);
  --c-text-dark: hsl(60 50% 86.67%);
}

@media screen {
  .scene {
    --durationSeconds: 120;
    --duration: calc(var(--durationSeconds) * 1s);
    --viewPointDelta: min(
      1px * var(--scrollLengthPx, 0),
      var(--cloudyHeaderBottom)
    );
    --travelDistance: 90vh;
    z-index: -2;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100lvh;
    overflow: hidden;
    perspective: calc(0.25 * var(--cloudyHeaderBottom) + 0.75 * 35vmax);
    perspective-origin: 50vw calc(15vh + 1.2 * var(--viewPointDelta));
  }

  .sky {
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .cloud {
    --height: 90vh;
    pointer-events: none;
    position: absolute;
    left: -205vw;
    right: -205vw;
    top: calc(8vh - var(--viewPointDelta));
    height: var(--height);
    background-image: url("./cloud.png");
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: calc(50% + cos(230 * var(--n)) * var(--height)) 50%;
    animation-name: zoom;
    animation-duration: var(--duration);
    animation-timing-function: steps(calc(var(--durationSeconds) * 30));
    animation-delay: calc(-0.1 * var(--duration) * var(--n));
    animation-iteration-count: infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    @media (prefers-reduced-motion: reduce) {
      & {
        animation-play-state: paused;
      }
    }
    [data-theme="dark"] & {
      background-image: url("./cloud-night.png");
    }
  }
}

@media screen {
  #brand {
    position: absolute;
    left: var(--inset);
    right: var(--inset);
    padding: 0.5rem;
    bottom: calc(-1 * var(--cloudyHeaderBottom));
    transform: translateY(calc(-1 * var(--viewPointDelta)));
    will-change: translateY;
  }
  [data-theme="dark"] #brand > * {
    text-shadow: 0 0 0.5em currentColor;
  }
}

@keyframes zoom {
  0% {
    opacity: 0;
    transform: translate3d(
      0,
      calc(4 * var(--viewPointDelta)),
      calc(-0.66667 * var(--travelDistance))
    );
  }

  20% {
    opacity: 1;
  }

  56.6% {
    opacity: 1;
  }

  66.66667% {
    opacity: 0;
  }

  76.6% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(
      0,
      calc(-1 * var(--viewPointDelta) + calc(var(--cloudyHeaderBottom) - 35vh)),
      calc(0.33333 * var(--travelDistance))
    );
  }
}

::selection {
  background: var(--c-accent);
  color: var(--c-text-light);
}

*,
:after,
:before {
  box-sizing: inherit;
  font-family: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  text-decoration-thickness: 0.1rem;
  transition: color ease 0.1s;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 1;
  flex-grow: 1;
  padding: 0;
  margin: 0;
  font-family: Inter, sans-serif;
  background-color: var(--c-light);
  color: var(--c-text-dark);
}

@media screen {
  body {
    border: 0.5rem solid var(--c-accent);
    &::before {
      content: "";
      z-index: -1;
      position: absolute;
      pointer-events: none;
      inset: -0.5rem;
      bottom: calc(1px - 0.5rem);
      border-radius: 1.3rem 1.3rem 1rem 1rem;
      border: 0.5rem solid var(--c-accent);
      outline: 0.5rem solid var(--c-accent);
    }
  }
  body > footer {
    position: relative;
    z-index: 1;
    background-color: var(--c-accent);
    color: var(--c-text-light);
    padding: 0 1ch 0;
    border-radius: 0.5rem 0.5rem 0 0;
  }
  body > footer::before {
    content: "";
    z-index: -1;
    position: absolute;
    height: calc(1rem - 1px);
    width: 1rem;
    margin: 0 0 -0.5rem -0.5rem;
    border-bottom-left-radius: 1rem;
    bottom: 1px;
    border: 0.5rem solid var(--c-accent);
    left: 100%;
    border-width: 0 0 0.5rem 0.5rem;
  }
  body > footer::after {
    content: "";
    z-index: -1;
    position: absolute;
    height: calc(1rem - 1px);
    width: 1rem;
    margin: 0 -0.5rem -0.5rem 0;
    border-bottom-right-radius: 1rem;
    bottom: 1px;
    border: 0.5rem solid var(--c-accent);
    right: 100%;
    border-width: 0 0.5rem 0.5rem 0;
  }
}

a {
  color: inherit;
}
a[href] {
  text-decoration-line: underline;
}
a[href]:hover,
a[href]:focus-visible,
label:hover,
label:focus-visible,
label:has(input:focus-visible) {
  text-decoration-color: var(--c-accent);
}

main {
  position: relative;
  @media screen {
    margin-top: var(--cloudyHeaderBottom);
    &::before {
      content: "";
      position: absolute;
      z-index: -2;
      top: -1rem;
      bottom: -1rem;
      left: calc(var(--inset) - 1rem);
      right: calc(var(--inset) - 1rem);
      border-radius: 1rem;
      background-color: var(--c-text-background-light);
    }
    margin-bottom: 4rem;
  }
}

main p img {
  max-width: 100%;
}

section {
  margin-top: 1rem;
}

.footnote-item:target,
.footnote-ref :target {
  animation: ping 1s ease-out;
  &,
  a {
    text-decoration-color: var(--c-accent);
  }
}

.footnotes-sep {
  margin-top: 4rem;
  border: none;
  height: 0.1rem;
  background-image: repeating-linear-gradient(
    to right,
    var(--c-accent),
    var(--c-accent) 0.5em,
    transparent 0.5em,
    transparent 1em
  );
}

@keyframes ping {
  0% {
    border-radius: 50%;
    background-color: var(--c-accent);
    box-shadow: var(--c-accent) 0 0 1rem 4rem;
  }
  100% {
    border-radius: 50%;
    background-color: transparent;
    box-shadow: transparent 0 0 0rem 0rem;
  }
  100% {
    border-radius: initial;
  }
}

li::marker {
  color: color-mix(in srgb, currentcolor 50%, transparent);
}
aside {
  display: inline-block;
  margin-left: 1ch;
  font-size: var(--s-1);
}
ul.collection {
  padding-left: 0;
  > li {
    list-style-type: none;
    + li {
      margin-top: 1rem;
    }
  }
}
p {
  margin: 0;
  + p {
    margin-top: 1lh;
  }
}
blockquote {
  margin: 1lh 0;
  padding: 0 1em;
  border-left: 0.2rem solid var(--c-accent);
}

sup {
  font-size: var(--s-1);
  margin-top: -0.2em;
}

body > header {
  color: var(--c-text-dark);
  padding: 0 var(--inset) 0.5rem;
  border-radius: 0.5rem 0.5rem 0 0;
  margin-bottom: 0.5rem;
}
body > header > nav {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1ch;
}
.nav-toggles {
  margin-left: auto;
  font-size: var(--s-1);
}
@media print {
  :root {
    font-size: 10pt;
  }
  body {
    --c-highlight: white --c-dark: white;
    --c-accent: black;
    --c-light: white;

    --c-text-light: black;
    --c-text-dark: black;

    --content-width: 100vw;
  }
  body {
    background: none;
  }
  h1,
  h2,
  h3,
  h4 {
    opacity: 0.75;
  }
  body > header > nav {
    display: none;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
  }
}

body > footer {
  text-align: center;
  font-size: var(--s-1);
  margin: auto var(--inset) 0 auto;
}

.header-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: var(--s-1);
  > * + *::before {
    content: "-";
    padding: 0 0.5ch;
  }
}

.nav-categories {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1ch;

  position: relative;
  z-index: 1;
  background-color: var(--c-accent);
  color: var(--c-text-light);
  padding: 0 1ch 0.25rem;
  border-radius: 0 0 0.5rem 0.5rem;
  &::before {
    content: "";
    z-index: -1;
    position: absolute;
    height: calc(1rem - 1px);
    width: 1rem;
    margin: -0.5rem 0 0 -0.5rem;
    border-top-left-radius: 1rem;
    top: 0;
    border: 0.5rem solid var(--c-accent);
    left: 100%;
    border-width: 0.5rem 0 0 0.5rem;
  }
  &::after {
    content: "";
    z-index: -1;
    position: absolute;
    height: calc(1rem - 1px);
    width: 1rem;
    margin: -0.5rem -0.5rem 0 0;
    border-top-right-radius: 1rem;
    top: 0;
    border: 0.5rem solid var(--c-accent);
    right: 100%;
    border-width: 0.5rem 0.5rem 0 0;
  }
}

label {
  cursor: pointer;
  text-decoration-line: underline;
  > input[type="radio"] {
    visibility: hidden;
    position: fixed;
    bottom: 110%;
  }
}
.nav-toggle-button {
  margin-left: 0.5ch;
  position: relative;
  z-index: 0;
  &:has(input[type="radio"]:checked) {
    padding-inline: 0.25rem;
    color: var(--c-text-dark);
    &::before {
      content: "";
      z-index: -1;
      position: absolute;
      top: -0.25rem;
      right: 0;
      bottom: -0.25rem;
      left: 0;
      border-radius: 0.25rem;
      background-color: var(--c-highlight);
    }
  }
}

[data-language="aurebesh"] {
  font-family: FTAurebesh;
  line-height: 1.25;
  ul:not(.collection) > li {
    list-style-type: square;
  }
}
[data-language="english"] {
  font-family: Inter;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  margin: 1rem calc(-0.5rem - var(--inset)) 0;
  padding: 0 calc(0.5rem + var(--inset));
  &:hover .header-anchor {
    opacity: 1;
  }
}
main {
  h1,
  h2,
  h3,
  h4 {
    clear: both;
    background-image: linear-gradient(
      50deg,
      var(--c-highlight) 0%,
      var(--c-highlight) calc(var(--inset) * 0.25),
      transparent calc(var(--inset) + 12rem)
    );
    margin-bottom: 0.25lh;
  }
  padding: 0 var(--inset);
}
h1 {
  font-size: var(--s3);
}
h2 {
  font-size: var(--s2);
}
h3 {
  font-size: var(--s1);
}
.header-anchor {
  position: absolute;
  transform: translateX(-100%);
  margin-left: -0.2ch;
  opacity: 0;
  transition: opacity ease-in 0.1s;
  &::before {
    content: "#";
  }
}

.item-summary {
  margin-bottom: 1rem;
}

p > code {
  display: inline-block;
  font-family: "Commit Mono", monospace;
  background-color: var(--c-text-background-light);
  padding: 0.1em;
  margin: -0.1em;
  border-radius: 0.5em;
}