/* 
CSS written by: Marcin
*/

@property --scroll-position {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --scroll-position-delayed {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --bg-rgb {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(100, 228, 147);
}

@property --total-count {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --strip-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@font-face {
  font-family: "Redaction";
  src: url("/fonts/redaction/Redaction-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Redaction";
  src: url("./../fonts/redaction/Redaction-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Redaction";
  src: url("./../fonts/redaction/Redaction-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Redaction\10;
  src: url("./../fonts/redaction/Redaction_10-Regular.woff2") format("woff2");
  font-weight: 10;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Redaction\10;
  src: url("./../fonts/redaction/Redaction_10-Regular.2f53ef3f.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Redaction\10;
  src: url("./../fonts/redaction/Redaction_10-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Redaction\10;
  src: url("./../fonts/redaction/Redaction_10-Italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Redaction\20;
  src: url("./../fonts/redaction/Redaction_20-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Redaction\20;
  src: url("./../fonts/redaction/Redaction_20-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Redaction\20;
  src: url("./../fonts/redaction/Redaction_20-Italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Redaction\35;
  src: url("./../fonts/redaction/Redaction_35-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Redaction\35;
  src: url("./../fonts/redaction/Redaction_35-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Redaction\35;
  src: url("./../fonts/redaction/Redaction_35-Italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Redaction\50;
  src: url("./../fonts/redaction/Redaction_50-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Redaction\50;
  src: url("./../fonts/redaction/Redaction_50-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Redaction\50;
  src: url("./../fonts/redaction/Redaction_50-Italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Redaction\70;
  src: url("./../fonts/redaction/Redaction_70-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Redaction\70;
  src: url("./../fonts/redaction/Redaction_70-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Redaction\70;
  src: url("./../fonts/redaction/Redaction_70-Italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Redaction\100;
  src: url("./../fonts/redaction/Redaction_100-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Redaction\100;
  src: url("./../fonts/redaction/Redaction_100-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Redaction\100;
  src: url("./../fonts/redaction/Redaction_100-Italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Besley;
  src: url("./../fonts/besley/Besley-Book.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Besley;
  src: url("./../fonts/besley/Besley-BookItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Besley;
  src: url("./../fonts/besley/Besley-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@keyframes adjust_position {
  to {
    --scroll-position: 1;
    --scroll-position-delayed: 1;
  }
}

@keyframes shiftHue {
  to {
    --test: 1;
  }
}

@keyframes scheme-shift {
  0%,
  24.9% {
    --bg-rgb: rgb(100, 228, 147);
  }
  25%,
  100% {
    --bg-rgb: rgb(137, 21, 118);
  }
}

@keyframes text_improvement {
  0% {
    font-family: Redaction\100;
  }
  16% {
    font-family: Redaction\70;
  }
  32% {
    font-family: Redaction\50;
  }
  48% {
    font-family: Redaction\35;
  }
  64% {
    font-family: Redaction\20;
  }
  80% {
    font-family: Redaction\10;
  }
  100% {
    font-family: Redaction;
  }
}

@keyframes title_scale {
  0%,
  20% {
    scale: 0.5;
  }

  93%,
  100% {
    scale: 1;
  }
}

@keyframes cycle-original {
  0%,
  18% {
    color: black;
    user-select: auto;
  }
  19%,
  71% {
    user-select: none;
    color: transparent;
  }
  72%,
  100% {
    user-select: auto;
    color: black;
  }
}

@keyframes cycle-second {
  0%,
  18% {
    color: transparent;
  }
  19%,
  42% {
    color: black;
  }
  43%,
  71% {
    color: transparent;
  }
  72%,
  100% {
    color: transparent;
  }
}

@keyframes cycle-third {
  0%,
  18% {
    color: transparent;
  }
  19%,
  42% {
    color: transparent;
  }
  43%,
  71% {
    color: black;
  }
  72%,
  100% {
    color: transparent;
  }
}

@keyframes adjust-to-cycle {
  0%,
  18% {
    transform: translateX(0%);
  }
  19%,
  42% {
    transform: translateX(-0.9ch);
  }
  43%,
  71% {
    transform: translateX(calc(-0.44 * var(--title-height) * 4));
  }
  72%,
  100% {
    transform: translateX(0%);
  }
}

@keyframes slide-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100cqw - 100%));
  }
}

@keyframes in-view {
  from {
    transform: translateX(0px);
  }
  to {
    opacity: 0;
    transform: translateX(500px);
  }
}

@keyframes drive-strip {
  to {
    --strip-progress: 1;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Besley, "Times New Roman", serif;
}

*::before,
*::after {
  box-sizing: border-box;
}

::selection,
a::selection {
  color: black;
  background: white;
}

a::selection {
  text-decoration: underline solid black;
}

:root {
  animation: adjust_position linear both;
  animation-timeline: scroll(root);
}

body {
  --title-height: 8vw;
  --padding-bottom: 0.5rem;
  --text-padding-bottom: 10vw;
  --text-space: 5vw;
  --text-ch-spacing: calc(var(--padding) + (1.4ch * var(--count, 0)));
  --lgMin: 1024px;

  --ease-OutQuint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-Quad: cubic-bezier(0.44, 0, 0.56, 1);
  --overshoot-ease: linear(
    0,
    0.49 7.4%,
    0.864 15.3%,
    1.005 19.4%,
    1.12 23.7%,
    1.206 28.1%,
    1.267 32.8%,
    1.296 36.4%,
    1.311 40.2%,
    1.313 44.2%,
    1.301 48.6%,
    1.252 56.9%,
    1.105 74.4%,
    1.048 82.5%,
    1.011 91.1%,
    1
  );

  --gap: 0.5rem;
  --padding: 1.5rem;
  --columns: 4;
  --column-width: calc(
    (100vw - (var(--padding) * 2) - (var(--gap) * (var(--columns) - 1))) /
      var(--columns)
  );
  --general-spacer: 1.5rem;

  --spread: -0.02em;

  --bg-rgb: rgb(100, 228, 147);
  --bg-oklch: oklch(
    calc(88.167% - (0.08 * var(--scroll-position)))
      calc(0.15844 + (0.2 * var(--velocity-abs)))
      calc(144.116 + (80 * var(--velocity-abs)))
  );
  --bg-from: oklch(
    from var(--bg-rgb) calc(l - (0.08 * var(--velocity-abs)))
      calc(c + (0.1 * var(--velocity-abs))) calc(h + (80 * var(--velocity-abs)))
  );

  --scroll-velocity: calc(
    var(--scroll-position) - var(--scroll-position-delayed)
  );
  --velocity-abs: max(
    calc(var(--scroll-velocity) * 1.5),
    calc(var(--scroll-velocity) * -1.5)
  );

  font-size: 1rem;
  line-height: 1.55;
  transition: --scroll-position-delayed 0.3s var(--ease-OutQuint);
  overscroll-behavior: contain;
  display: grid;
  gap: var(--gap);
  grid-template-columns:
    calc(var(--padding) - var(--gap)) repeat(var(--columns), 1fr)
    calc(var(--padding) - var(--gap));
  background: var(--bg-oklch, var(--bg-rgb));
  anchor-name: --focus-follow;

  @media (min-width: 1024px) {
    font-size: 20px;
    --columns: 12;
    --general-spacer: 1rem;
  }
  @media (prefers-reduced-motion: no-preference) {
    animation:
      shiftHue linear,
      scheme-shift linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root), scroll(root);
  }
  @supports (background: oklch(from red l c h)) {
    background: var(--bg-from);
  }
  @supports (color: rgb(random(--test, 0, 255), 0, 0)) {
    --bg-rgb: rgb(
      random(--bg-r, 200, 255),
      random(--bg-g, 170, 240),
      random(--bg-b, 160, 225)
    );
  }

  > * {
    grid-column: 2 / -2;
    @media (min-width: 1024px) {
      grid-column: 2 / -3;
    }
  }

  &::before {
    content: "";
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -14 28 28'%3E%3Crect x='-3' y='-12' width='6' height='24' rx='2' transform='rotate(0)'/%3E%3Crect x='-3' y='-12' width='6' height='24' rx='2' transform='rotate(60)'/%3E%3Crect x='-3' y='-12' width='6' height='24' rx='2' transform='rotate(120)'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background: white;
    height: calc(var(--padding) - var(--gap));
    width: calc(var(--padding) - var(--gap));
    position: fixed;
    transform: rotate(calc(-1 * var(--scroll-position) * 360deg));
    bottom: 0;
    left: 0;
    mix-blend-mode: exclusion;
  }

  &::after {
    content: "";
    position: absolute;
    position-anchor: --focus-follow;
    left: anchor(left);
    right: anchor(right);
    top: anchor(top);
    bottom: anchor(bottom);
    border-block-start: 3px solid red;
    border-block-end: 3px solid red;

    background: black;

    position: absolute;

    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition:
      inset 300ms,
      opacity 0ms;
  }

  &:has(:focus-visible)::after {
    opacity: 1;
  }

  *:focus-visible,
  * *:focus-visible {
    anchor-name: --focus-follow;
    color: white;
    transition: color 300ms;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
abbr,
p,
summary {
  letter-spacing: var(--spread);
  mix-blend-mode: difference;
  color: white;
  isolation: isolate;
}

abbr {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

h2,
h3,
h4,
h5,
h6,
abbr,
p,
summary {
  @media (prefers-reduced-motion: no-preference) {
    transform: translateY(calc(50% * (var(--scroll-velocity) * -1)))
      scale(calc(1 + (-0.02 * var(--scroll-velocity))));
  }
}

h2,
h3,
h4,
h5,
h6 {
  background: white;
  mix-blend-mode: exclusion;
  color: black;
  display: inline-block;
  font-family: Redaction;

  &::selection {
    color: white;
    background: black;
    text-decoration: underline solid white;
  }
  @supports (animation-timeline: view()) {
    animation: text_improvement 0.75s var(--ease-OutQuint) both;
    animation-timeline: view();
    animation-range: entry 50% exit 65%;
    animation-composition: add;
  }
}

@media (min-width: 1024px) {
  h2 {
    font-size: 1.5em;
  }
  h3 {
    font-size: 1.375em;
  }
}

span {
  font-family: inherit;
}

a {
  color: chartreuse;
  mix-blend-mode: difference;
  text-decoration-style: double;
  text-decoration-thickness: 1px;
  font-weight: 500;
}

p,
summary {
  text-wrap: balance;
  text-wrap: pretty;
  max-width: 65ch;
  line-height: 1.6;
}

header {
  height: 100%;
  position: relative;
  font-size: clamp(26px, var(--title-height), var(--title-height));
  margin-bottom: 0.75rem;

  > *:not(h1) {
    padding-left: 0.5rem;
  }
  &::before {
    content: "";
    background: white;
    width: 0.25rem;
    height: calc(100% + var(--gap));
    position: absolute;
    left: -0.5rem;
    mix-blend-mode: exclusion;
  }

  &::after {
    content: "";
    background: white;
    width: 0.25rem;
    top: 0;
    height: 1lh;
    position: absolute;
    left: -0.25rem;
    mix-blend-mode: exclusion;
  }

  h1 {
    --improvement-duration: 0.75s;
    --improvement-delay: 0.15s;
    --improvement-total: calc(
      var(--improvement-duration) + var(--improvement-delay)
    );
    min-height: 10vw;
    font-size: clamp(26px, var(--title-height), var(--title-height));
    animation: text_improvement var(--improvement-duration)
      var(--improvement-delay) var(--ease-OutQuint) forwards;
    font-family: Redaction;
    font-style: italic;
    font-weight: 400;
    letter-spacing: var(--spread);
    text-transform: uppercase;
    transition: font-weight 2s ease;
    transition-delay: 5s;

    margin-bottom: 0.5rem;

    background: white;
    color: black;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }

    @media (min-width: 1024px) {
      padding-left: 0.5rem;
    }

    &::before {
      content: "Color in motion";
      position: fixed;
      display: none;
      line-height: 1;
      height: 100svh;
      text-align: center;
      bottom: 0;
      right: var(--padding);
      font-family: Besley;
      font-style: normal;
      text-transform: lowercase;
      font-weight: 400;
      font-size: calc(var(--column-width) * 0.75);
      color: red;
      letter-spacing: 0;
      writing-mode: vertical-rl;
      text-orientation: sideways;

      @media (min-width: 1024px) {
        display: block;
      }
    }

    &::after {
      content: "Color in motion";
      position: fixed;
      display: none;
      line-height: 1;
      height: 100svh;
      text-align: center;
      bottom: 0;
      right: var(--padding);
      font-family: Besley;
      font-style: normal;
      text-transform: lowercase;
      font-weight: 400;
      font-size: calc(var(--column-width) * 0.75);
      color: transparent;
      letter-spacing: 0;
      writing-mode: vertical-rl;
      text-orientation: sideways;
      background-image: linear-gradient(white, white);
      background-size: 100% calc(var(--scroll-position) * 100%);
      background-repeat: no-repeat;
      background-position: top;
      background-clip: text;

      @media (min-width: 1024px) {
        display: block;
      }
    }

    span {
      --span-duration: 5s;
      --span-delay: var(--improvement-total);
      --span-animation: var(--span-duration) var(--span-delay)
        var(--ease-OutQuint) infinite;

      &:nth-child(3) {
        position: relative;
        animation: cycle-original var(--span-animation);

        &::before {
          content: "we";
          position: absolute;
          left: 0%;
          top: 50%;
          transform: translate(0%, -50%);
          animation: cycle-second var(--span-animation);
          color: transparent;
        }

        &::after {
          content: "i";
          position: absolute;
          left: 0;
          top: 50%;
          animation: cycle-third var(--span-animation);
          transform: translate(0%, -50%);
          color: transparent;
        }
      }

      &:nth-child(4) {
        animation: adjust-to-cycle var(--span-animation);
        display: inline-block;
      }
      &::selection {
        color: white;
        background: black;
        text-decoration: underline solid white;
      }
    }
  }

  p {
    font-size: 16px;
    @media (min-width: 1024px) {
      font-size: 20px;
    }
  }
}

main,
aside,
footer {
  --spacing: 0.5rem;
  mix-blend-mode: exclusion;
  position: relative;

  @media (min-width: 1024px) {
    --spacing: 1rem;
  }

  &:not(:last-child) {
    --extra-padding: var(--gap);
  }

  &::before {
    mix-blend-mode: hue;
    content: "";
    background: white;
    left: -0.5rem;
    width: 0.25rem;
    height: calc(100% + var(--extra-padding, 0px));
    position: absolute;
  }

  *:not(em, p > a, abbr, details *, section, ul *) {
    padding-left: var(--spacing);
    &:is(h2, h3, h4, h5, h6, abbr) {
      padding-inline: var(--spacing);
    }
  }
  p {
    + p {
      margin-top: calc(var(--general-spacer) * 0.5);
    }
  }

  section {
    margin-top: calc(var(--general-spacer) * 1.25);
  }

  h3,
  h4 {
    &:not(:first-child) {
      margin-top: var(--general-spacer);
    }
  }

  h2,
  h3,
  h4 {
    position: relative;
    margin-left: calc(var(--spacing) * var(--index, 1));

    &:has(+ p, + ul) {
      margin-bottom: 0.75rem;
    }

    &::before {
      mix-blend-mode: hue;
      content: "";
      background: white;
      top: 50%;
      left: calc((-1 * var(--index, 1)) * var(--spacing) - 0.25rem);
      transform: translateY(-50%);
      height: 0.25rem;
      width: calc(var(--index, 1) * var(--spacing) + 0.25rem);
      position: absolute;
    }
  }

  h3 {
    --index: 2;
  }

  h4 {
    --index: 3;
  }

  h5 {
    --index: 4;
  }

  h3 ~ *:not(h3, h4, h5, em) {
    padding-left: calc(var(--spacing) * 2);
  }

  h4 ~ *:not(h5, h6, em) {
    padding-left: calc(var(--spacing) * 3);
  }
}

aside:has(+ *) {
  margin-bottom: calc(var(--general-spacer) * 1.25);

  &::before {
    height: calc(100% + var(--gap) + (var(--general-spacer) * 1.25));
  }
}

aside {
  h2 {
    margin-bottom: calc(var(--general-spacer) * 0.5);
  }

  &:first-of-type {
    &::after {
      content: "";
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -14 28 28'%3E%3Crect x='-3' y='-12' width='6' height='24' rx='2' transform='rotate(0)'/%3E%3Crect x='-3' y='-12' width='6' height='24' rx='2' transform='rotate(60)'/%3E%3Crect x='-3' y='-12' width='6' height='24' rx='2' transform='rotate(120)'/%3E%3C/svg%3E");
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      background: white;
      height: calc(var(--padding) - var(--gap));
      width: calc(var(--padding) - var(--gap));
      position: fixed;
      transform: rotate(calc(var(--scroll-position) * 360deg));
      top: 0;
      left: 0;
      mix-blend-mode: exclusion;
    }
  }

  &:last-of-type {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      left: var(--spacing);
      background-color: white;
      top: 0;
      width: 0.25rem;
      height: 100%;
    }
  }
}

#sessions {
  ul {
    --container-height: 35svh;
    --image-size: 200px;
    padding: 0;
    font-size: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--image-size), 1fr));
    padding: calc(var(--gap) + 0.5rem);
    padding-left: var(--gap);
    margin-block: 1.5rem;
    gap: var(--gap);
    background: white;

    position: relative;

    animation: drive-strip linear both;
    animation-timeline: view(block);
    animation-range: entry-crossing 130% exit-crossing -20%;

    &::before {
      content: "";
      background: white;
      width: 0.25rem;
      top: 0;
      height: 100%;
      position: absolute;
      left: -0.25rem;
      mix-blend-mode: exclusion;
    }

    &::after {
      content: "";
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -14 28 28'%3E%3Crect x='-3' y='-12' width='6' height='24' rx='2' transform='rotate(0)'/%3E%3Crect x='-3' y='-12' width='6' height='24' rx='2' transform='rotate(60)'/%3E%3Crect x='-3' y='-12' width='6' height='24' rx='2' transform='rotate(120)'/%3E%3C/svg%3E");
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      background: white;
      height: calc(var(--padding) - var(--gap));
      width: calc(var(--padding) - var(--gap));
      position: fixed;
      transform: rotate(calc(var(--scroll-position) * 360deg));
      bottom: 0;
      right: 0;
    }

    @supports (width: calc(5px * sibling-index())) {
      overflow-x: hidden;
      overflow-x: clip;
      grid-template-columns: 1fr;
      place-content: center;
      grid-template-rows: 1fr;
      padding: 0;
      height: var(--container-height);
      background: transparent;
      margin-top: 2em;
      margin-bottom: 5em;
    }

    @media (min-width: 1024px) {
      --container-height: 50svh;
      --image-size: 300px;
    }

    li {
      --primary: black;
      --secondary: white;
      background: var(--secondary);

      list-style: none;
      display: flex;
      flex-direction: column-reverse;
      justify-content: flex-end;
      opacity: var(--fade, 1);
      mix-blend-mode: exclusion;
      position: relative;

      transition:
        transform 0.2s var(--overshoot-ease),
        scale 0.2s var(--overshoot-ease),
        opacity 0.2s var(--ease-OutQuint);

      &:has(a:hover) {
        background: var(--primary);
      }

      scale: 0.98;
      &:hover {
        scale: 1;
      }

      @supports (width: calc(5px * sibling-index())) {
        --primary: black;
        --secondary: white;

        background: transparent;

        --offset: calc(
          -1 * sibling-count() + sibling-index() + var(--strip-progress) *
            (sibling-count() - 1)
        );
        --abs-offset: max(var(--offset), calc(-1 * var(--offset)));
        --fade: clamp(0, calc(1.5 - var(--offset)), 1);

        transform: translateX(
            calc(
              (sibling-count() * (-100% - 3rem)) +
                ((100% + 3rem) * (sibling-index())) -
                (var(--strip-progress) * (-100% - 3rem) * (sibling-count() - 1))
            )
          )
          scale(0.99);
        transform-origin: left;

        grid-row: 1;
        grid-column: 1;
        aspect-ratio: 1 / 1;
        max-height: var(--container-height);

        &:hover {
          transform: translateX(
              calc(
                (sibling-count() * (-100% - 2rem)) +
                  ((100% + 2rem) * (sibling-index())) -
                  (
                    var(--strip-progress) * (-100% - 2rem) *
                      (sibling-count() - 1)
                  )
              )
            )
            scale(1);

          opacity: 1;
        }

        &:has(a:hover) {
          background: white;
        }
      }

      a {
        display: inline-block;
        color: var(--primary);
        background: var(--secondary);
        mix-blend-mode: normal;
        padding: 0.5rem 0.75rem;
        height: 100%;
        font-size: 16px;
        border-bottom: 2px solid transparent;

        &:hover {
          background: var(--primary);
          color: var(--secondary);
          border-color: var(--secondary);

          &::selection {
            color: var(--primary);
            background: var(--secondary);
            text-decoration: underline solid var(--primary);
          }
        }

        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }

        @media (min-width: 1024px) {
          font-size: 20px;
        }

        &::selection {
          color: white;
          background: black;
          text-decoration: underline solid white;
        }
      }

      img {
        pointer-events: none;
        user-select: none;
        display: block;
        object-fit: cover;
        width: 100%;
        aspect-ratio: 1 / 1;
        mix-blend-mode: exclusion;
      }
    }
  }
}

details {
  &:not(:first-child) {
    margin-top: var(--general-spacer);
  }

  transition: height 0.2s ease;
  summary {
    padding: 0.25rem 0.5rem;
    list-style: none;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    width: 35ch;
    background: white;
    color: black;
  }

  p {
    margin-top: 0.5rem;
    transform: translate(0, 0) scale(1);
    opacity: 1;
    transition: all 0.3s var(--ease-Quad);
    margin-left: 0.5rem;
  }
}
footer {
  &::after {
    content: "";
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -14 28 28'%3E%3Crect x='-3' y='-12' width='6' height='24' rx='2' transform='rotate(0)'/%3E%3Crect x='-3' y='-12' width='6' height='24' rx='2' transform='rotate(60)'/%3E%3Crect x='-3' y='-12' width='6' height='24' rx='2' transform='rotate(120)'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background: white;
    height: calc(var(--padding) - var(--gap));
    width: calc(var(--padding) - var(--gap));
    position: fixed;
    transform: rotate(calc(-1 * var(--scroll-position) * 360deg));
    top: 0;
    right: 0;
  }
}
footer ul li,
header p {
  list-style: none;
  --hover-direction: 2;
  &:has(a) {
    color: chartreuse;

    &::before,
    &::after {
      --direction: 1;
      content: "";
      background-color: currentColor;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -14 28 28'%3E%3Crect x='-3' y='-12' width='6' height='24' rx='2' transform='rotate(0)'/%3E%3Crect x='-3' y='-12' width='6' height='24' rx='2' transform='rotate(60)'/%3E%3Crect x='-3' y='-12' width='6' height='24' rx='2' transform='rotate(120)'/%3E%3C/svg%3E");
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      height: 1em;
      width: 1em;
      vertical-align: revert;
      text-decoration-thickness: 0px;
      transition:
        rotate 0.5s var(--overshoot-ease),
        scale 0.4s var(--overshoot-ease);
      display: inline-block;
      user-select: none;
      pointer-events: none;
    }

    &::after {
      --direction: -1;
    }
  }

  &:has(a:hover) {
    &::before,
    &::after {
      rotate: calc(120deg * var(--direction));
      scale: 0.8;
    }
  }

  a {
    position: relative;
    padding: 0 0.5rem;

    &::before {
      cursor: pointer;
      content: "";
      position: absolute;
      left: calc(-0.5rem - 1ch);
      top: 0;
      height: 100%;
      width: calc(100% + (1rem + 2ch));
      z-index: -1;
      mix-blend-mode: exclusion;
    }
  }
}