@import url("reset.css");
@import url("https://fonts.cdnfonts.com/css/certa-sans");
@import url(https://db.onlinewebfonts.com/c/7cd0349574373d9bf4f57f07d895f63d?family=Certa+Serif);

* {
  box-sizing: border-box;
  font-size: clamp(var(--min-text-size), 1em, var(--max-text-size));
}

:root {
  --setting-reduced-transparency: false;

  --clr-accent: #f36273;
  --clr-main: #f7e293;
  --clr-comp: #1dbee8;
  --clr-aux: #fdb078;
  --clr-tool: #00a289;
  --clr-text: #0a0a0a;

  --body-bg-img: url(../assets/background.jpg);
  --bg-plain-color: #fff9d2;

  --font-regular-sans:
    "Certa Sans", "SCE-PS3 Rodin LATIN", "Bleeker Rus (Fixed)",
    "PF DinText Pro", Helvetica, Arial, sans-serif;
  --font-regular-serif:
    "Tagesschrift Cyrillic", "VC Honey", "Book Antiqua", "Times New Roman",
    serif;
  --font-heading-sans: "SCE-PS3 Rodin LATIN", sans-serif;
  --font-heading-serif: "Certa Serif", "Academy.kz", serif;
  --font-heading-small: "ClickClack (RUS BY hidsky41)", sans-serif;
  --font-fancy: "Monotype Corsiva", "Palatino Linotype", "Constantia", cursive;

  /*
    background-color: rgb(22, 22, 22);
    color: #eaeaea;
    */

  --vp-width: 100dvw;
  width: var(--vp-width);
  max-width: 100%;
  min-height: 100vh;

  --body-width: 100%;
  --body-padding: 45px;

  --body-padding-block: calc(
    var(--body-padding, 25px) * var(--body-padding-mult, 1)
  );
  --body-padding-inline: calc(
    var(--body-padding, 25px) * var(--body-padding-mult, 1) * 1.5
  );

  --basic-hf-heigt: 100px;
  --header-height: var(--basic-hf-heigt);
  --footer-height: var(--basic-hf-heigt);

  --aside-width: 280px;
  --aside-height: 250px;

  --max-text-size: 128px;
  --min-text-size: 6px;

  --main-sect-padding: 15px;
  --main-margin-base: 25px;
  --main-gap: calc(var(--main-margin-base) / 1.05);

  --p-max-width: 65ch;

  --timeline-gap: 13px;
  --timeline-links-gap-base: 6px;
  --timeline-links-gap-inline: var(--timeline-links-gap-base);
  --timeline-links-gap-block: calc(var(--timeline-links-gap-base) * 1.2);

  --frosted-glass: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16384" height="16384" aria-hidden="true" class="svg-filter" hidden=""%3E%3Cfilter id="filter-frosted-glass" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse"%3E%3CfeTurbulence type="turbulence" baseFrequency="0.056 0.09" numOctaves="3" seed="10" stitchTiles="stitch" x="0%25" y="0%25" width="120%25" height="120%25" result="turbulence"%3E%3C/feTurbulence%3E%3CfeTurbulence type="turbulence" baseFrequency="0.06 0.119" numOctaves="2" seed="7" stitchTiles="stitch" x="0%25" y="0%25" width="100%25" height="100%25" result="turbulence1"%3E%3C/feTurbulence%3E%3CfeDisplacementMap in="turbulence1" in2="turbulence" scale="25" xChannelSelector="R" yChannelSelector="B" x="0%25" y="0%25" width="100%25" height="100%25" result="displacementMap"%3E%3C/feDisplacementMap%3E%3CfeDisplacementMap in="SourceGraphic" in2="displacementMap" scale="12" xChannelSelector="R" yChannelSelector="G" x="0%25" y="0%25" width="100%25" height="100%25" result="displacementMap1"%3E%3C/feDisplacementMap%3E%3CfeDisplacementMap in="displacementMap" in2="displacementMap1" scale="15" xChannelSelector="B" yChannelSelector="R" x="0%25" y="0%25" width="100%25" height="100%25" result="displacementMap2"%3E%3C/feDisplacementMap%3E%3CfeDisplacementMap in="SourceGraphic" in2="displacementMap2" scale="20" xChannelSelector="B" yChannelSelector="B" x="0%25" y="0%25" width="100%25" height="100%25" result="displacementMap3"%3E%3C/feDisplacementMap%3E%3C/filter%3E%3C/svg%3E#filter-frosted-glass');
}

/* Mobile */
@media (max-aspect-ratio: 3/4) or ((min-aspect-ratio: 3/4) and (max-aspect-ratio: 1/1)) {
  :root {
    --mobile: true;
    --desktop: false;
    --widescreen: false;

    --body-template-areas: "HEAD" "MAIN" "ASIDE" "FOOT";
    --timeline-flow: row nowrap;
    --timeline-overflow-x: scroll;
    --body-padding-mult: 0;
    --body-template-rows: var(--header-height)
      calc(100dvh - var(--header-height)) var(--aside-height)
      var(--footer-height);
    --body-template-columns: 1fr;

    --main-width: calc(var(--vp-width) - (var(--body-padding-inline) * 2));
    --main-height: calc(
      100dvh - var(--header-height) - var(--body-padding-block)
    );

    --main-margin-base: 0px;
    --main-margin-block: var(--main-margin-base);
    --main-margin-inline: calc(var(--main-margin-base) * 5);

    --aside-negative-margin: 0;
  }
}

/* Desktop */
@media ((min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3)) or (min-aspect-ratio: 4/3) {
  :root {
    --mobile: false;
    --desktop: true;
    --widescreen: false;

    --body-template-areas: "HEAD ASIDE" "MAIN ASIDE" "MAIN FOOT";
    --timeline-flow: column nowrap;
    --timeline-overflow-x: unset;
    --body-padding-mult: 1;
    --body-template-rows: var(--header-height)
      minmax(var(--main-height), max-content) var(--footer-height);
    --body-template-columns: var(--main-width) var(--aside-width);

    --aside-height: 100vh;
    --main-width: calc(
      var(--vp-width) - (var(--body-padding-inline) * 2) - var(--aside-width)
    );
    --main-height: calc(
      100dvh - var(--header-height) - var(--body-padding-block) -
        var(--footer-height)
    );

    --main-margin-block: var(--main-margin-base);
    --main-margin-inline: calc(var(--main-margin-base) * 5);
  }

  /* Ultra-wide */
  @media (min-width: 2048px) {
    :root {
      --widescreen: true;

      --body-width: 2048px;
      --margin-inline: auto;
      --body-padding-mult: 0;

      --main-width: calc(
        var(--body-width) - (var(--body-padding-inline) * 2) -
          var(--aside-width)
      );
    }
  }
}

body {
  display: grid;
  grid-template-areas: var(--body-template-areas);
  grid-template-rows: var(--body-template-rows);
  grid-template-columns: var(--body-template-columns);
  justify-content: space-between;

  height: 100%;
  min-height: calc(100vh - var(--body-padding-block) * 1);
  width: var(--body-width);
  max-width: var(--vp-width);
  margin-inline: var(--margin-inline, none);

  padding-block-start: var(--body-padding-block);
  padding-inline: var(--body-padding-inline);

  position: relative;
  scrollbar-gutter: stable both-edges;

  font-family: var(--font-regular-sans);
  color: var(--clr-text);
}

body::before {
  content: "background here";
  font-size: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: block;
  z-index: -1;
  background-color: var(--bg-plain-color);
  /* var(--clr-main); */
  background-image: var(--body-bg-img);
  background-blend-mode: hard-light;
  background-size: cover;
  background-repeat: repeat-x;
  top: 0;
  left: 0;
}

header {
  --link-padding-block: 18px;
  --link-padding-inline: 24px;

  grid-area: HEAD;

  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;

  nav {
    width: auto;
    margin-inline: auto;

    & > ul {
      display: flex;
      flex-flow: row nowrap;

      li {
        --bg-color: var(--clr-main);
        --deg: calc(
          (
              rem(
                  (sibling-index() + var(--header-link-rotation-mod)) * 7919,
                  31
                ) -
                17
            ) *
            1deg
        );

        background-color: var(--bg-color);
        transform: rotateZ(var(--deg));

        mask-image:
          linear-gradient(black, black),
          radial-gradient(
            at 50% 50%,
            black,
            black 15%,
            transparent 20%,
            transparent
          );
        mask-type: alpha;
        mask-composite: exclude;
        mask-size: 45px 45px;
        mask-position: 113%;
        mask-repeat: repeat, no-repeat;

        a {
          display: block;
          padding-block: var(--link-padding-block);
          padding-inline: var(--link-padding-inline);
          padding-inline-end: calc(var(--link-padding-inline) * 1.25);
          color: white;
          text-decoration: none;

          --bg-darker: oklch(
            from var(--bg-color) calc(l - 0.075) calc(c + 0.01) calc(h - 10) / 1
          );
          background-image: linear-gradient(
            270deg,
            var(--bg-darker) 15%,
            transparent 15%,
            transparent
          );
        }

        &:hover {
          --header-link-rotation-mod: calc(
            sin(sibling-index() / 2 * 13) * -1.285
          );
          transition: 10ms 0.1ms;
        }

        &:nth-child(1n) {
          --bg-color: var(--clr-aux);
        }
        &:nth-child(2n + 1) {
          --bg-color: var(--clr-comp);
        }
        &:nth-child(3n) {
          --bg-color: var(--clr-accent);
        }
        &:nth-child(3n + 2) {
          --bg-color: var(--clr-main);
        }
        &:nth-child(5n) {
          --bg-color: var(--clr-tool);
        }
        &:nth-child(7n) {
          --bg-color: oklch(from var(--clr-comp) l c calc(h - 280) / 1);
        }
      }
    }
  }
}

@property --header-link-rotation-mod {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

main {
  grid-area: MAIN;

  display: flex;
  flex-flow: column wrap;

  margin-block: var(--main-margin-block, 25px);
  margin-inline: var(--main-margin-inline, 25px);

  /*
    overflow: hidden;
    */

  article {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    align-content: center;

    justify-content: if(style(--mobile: true): center; else: space-around);
    width: 100%;
    row-gap: var(--main-gap);

    section {
      display: flex;
      flex-flow: column wrap;
      width: fit-content;

      p {
        max-width: var(--p-max-width);
        line-height: 1.15em;
      }
    }
  }
}

aside {
  grid-area: ASIDE;

  display: flex;
  flex-flow: column nowrap;

  min-width: var(--aside-width);
  width: var(--aside-width);
  height: var(--aside-height);
  overflow-y: auto;
  position: fixed;

  margin-block-start: calc(
    var(--body-padding-block) * -1 * var(--aside-negative-margin, 1)
  );
  padding-block-start: calc(
    var(--body-padding-block) * 1 * var(--aside-negative-margin, 1)
  );

  &::-webkit-scrollbar {
    display: none;
  }

  #timeline {
    --timeline-block-height-min: 350px;
    --timeline-block-height-max: 550px;

    & > hgroup {
      text-align: center;
      font-size: calc(var(--max-text-size) / 4);
      width: var(--aside-width);
      color: var(--clr-comp);

      background-image: linear-gradient(
        to top,
        transparent 15px,
        var(--clr-accent) 15px,
        var(--clr-accent) 17px,
        var(--clr-accent) 20px,
        transparent 20px,
        transparent 23px,
        var(--clr-accent) 23px,
        var(--clr-accent) 25px,
        transparent 25px
      );
      text-shadow: 0em 0.1em 0 var(--clr-main);

      p {
        font-size: 0.4em;
        font-family: var(--font-heading-small);
        text-shadow: none;
        color: var(--clr-accent);
      }
    }

    #timeline-blocks {
      display: flex;
      flex-flow: var(--timeline-flow);
      overflow-x: var(--timeline-overflow-x);
      gap: var(--timeline-gap);

      & > li {
        width: 100%;
        max-height: var(--timeline-block-height-max);
        min-height: var(--timeline-block-height-min);

        --color-bg: rgb(152, 239, 245);
        --amount-indx: calc(
          (sibling-count() * 3 / sibling-index()) * sin(sibling-count() * 17) *
            5 * sibling-index()
        );
        background-color: --shift-hue(
          var(--color-bg),
          sibling-index(),
          var(--amount-indx)
        );

        &:nth-child(2n + 1) {
          --color-bg: var(--clr-aux);
          /*rgb(247, 132, 79);*/
        }

        &:nth-child(3n + 1) {
          --color-bg: var(--clr-accent);
          /*rgb(250, 90, 111);*/
        }

        &:nth-child(5n + 1) {
          --color-bg: var(--clr-comp);
          /*rgb(255, 219, 101);*/
        }

        --timeline-block-padding-base: var(--timeline-gap);
        --timeline-block-padding-inline: calc(
          var(--timeline-block-padding-base) * 1
        );
        --timeline-block-padding-block-start: calc(
          var(--timeline-block-padding-base) * 1.25
        );
        --timeline-block-padding-block-end: calc(
          var(--timeline-block-padding-base) * 2
        );
        padding-inline: var(--timeline-block-padding-inline);
        padding-block-start: var(--timeline-block-padding-block-start);
        padding-block-end: var(--timeline-block-padding-block-end);
      }

      hgroup {
        --title-size: 1.25em;
        --p-size: 0.9em;
        text-align: center;
        position: relative;

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          font-size: var(--title-size);
          display: block;
          margin-block-start: calc(-1 * var(--title-size) * 0.6);
        }

        p {
          font-size: var(--p-size);
          display: block;
          text-align: justify;
          text-align-last: center;
          font-family: var(--font-heading-small);
        }
      }

      figure {
        & > a img {
          width: 100%;
        }

        nav {
          margin-block: var(--timeline-links-gap-block);

          ul {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
            align-items: center;
            align-content: center;
            gap: var(--timeline-links-gap-inline)
              var(--timeline-links-gap-block);

            li {
              flex-grow: 1;

              --radius: 15px;
              --default-shadow: color-mix(
                in oklab,
                var(--link-bg-color),
                black
              );
              background-color: var(--link-bg-color, magenta);
              border-radius: var(--radius);
              position: relative;

              --second-color: --shift-hue(
                var(--link-bg-color, magenta),
                146,
                155,
                1
              );
              --shade: color-mix(
                in oklab,
                var(--link-bg-color, magenta),
                rgb(247 53 53) 25%
              );
              background-image:
                linear-gradient(
                  to bottom,
                  rgba(255, 255, 255, 0.7),
                  rgba(255, 255, 255, 0.45) 40%,
                  transparent
                ),
                linear-gradient(277deg, var(--second-color), transparent),
                linear-gradient(to bottom, transparent, var(--shade));

              background-blend-mode: normal, color-burn, normal;

              text-shadow: 0px 1px 2px
                var(--link-shadow-color, var(--default-shadow));
              box-shadow: 0px 1px 2px 0px
                var(--link-shadow-color, var(--default-shadow));

              &::before {
                display: block;
                content: "button-link";
                font-size: 0;
                position: absolute;
                background-image: radial-gradient(
                  at top,
                  rgba(255, 255, 255, 0.582),
                  rgba(255, 255, 255, 0.432) 60%,
                  transparent
                );
                background-size: 90%;
                border-radius: var(--radius);

                --w: 95%;
                --t: calc((100% - var(--h)) / 2);
                --h: 77%;
                --l: calc((100% - var(--w)) / 2);
                width: var(--w);
                height: var(--h);
                top: var(--t);
                left: var(--l);
                mix-blend-mode: screen;
                opacity: 0.8;
                pointer-events: none;

                mask-image: radial-gradient(at 77%, black, transparent);
              }

              a {
                display: block;
                color: var(--link-text-color, white);
                text-decoration: none;
                font-variant: normal;
                text-transform: none;
                text-align: center;
                width: 100%;
                height: 100%;

                padding-inline: 0.6em;
                padding-block: 0.27em;
                font-size: 16px;

                @container timeline-link (max-width: 85px) {
                  font-size: 0px;

                  i {
                    font-size: 16px;
                  }
                }

                @container timeline-link (max-width: 386px) {
                  font-size: 16px;

                  i {
                    font-size: 16px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #aside-projects {
    nav > ul {
      display: flex;
      flex-flow: row wrap;
      width: var(--aside-width);
    }
  }
}

footer {
  grid-area: FOOT;

  position: sticky;
  bottom: 0;
  display: flex;
  flex-flow: column nowrap;
  background-color: rgb(173, 130, 95);

  /* experimental */
  width: 110%;
  margin-inline-start: -5%;

  #contacts {
    display: flex;
    flex-flow: column wrap;

    nav > ul {
      display: flex;
      flex-flow: row wrap;
    }
  }

  #license {
    /* style */
  }
}

.callout {
  --callout-max-height: 200px;
  --callout-heading-height: 50px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-height: var(--callout-max-height);
  text-wrap: balance;
  position: relative;

  /*
  max-height: var(--callout-max-height);
  */
  flex-grow: 1;
  /*TODO*/

  h3 {
    text-align: center;
    font-family: var(--font-heading-sans);
  }

  figcaption {
    height: 100%;
    padding-block: 2em;
    width: 100%;
  }

  &.attention {
    --clr-accent-wip: var(--clr-aux);
    --clr-second: var(--clr-main);
    --clr-bg: color-mix(in oklab, var(--clr-second) 85%, var(--clr-accent-wip));
    --clr-alpha: 0.75;
    --clr-bg-alpha: --color-alpha(var(--clr-bg), var(--clr-alpha));

    --bg-step: 18px;
    --bg-image: repeating-linear-gradient(
      45deg,
      var(--clr-accent-wip) 0px,
      var(--clr-accent-wip) var(--bg-step),
      var(--clr-second) var(--bg-step),
      var(--clr-second) calc(var(--bg-step) * 2)
    );
    --border-width-number: 10;

    box-shadow: 0px 0px 1em 0px var(--clr-bg);

    h3 {
      display: block;
      height: var(--callout-heading-height);
      line-height: var(--callout-heading-height);
      width: 100%;
      background-image: var(--bg-image);
      font-size: calc(var(--max-text-size) / 5);
    }

    figcaption {
      --border-px: calc(var(--border-width-number) * 1px);
      padding-inline: 5%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;

      background-image: linear-gradient(
        to top,
        var(--clr-bg-alpha),
        transparent 250%
      );
      backdrop-filter: blur(3px) sepia(0.25);

      p {
        width: fit-content;
        max-width: 75%;
      }
    }
  }
}

.stamp {
  --width: 22ch;
  --height: calc(var(--width) / 2);
  --padding-in: calc(var(--width) / 15);
  --padding-block: calc(var(--width) / 10);
  --clr-stamp: var(--clr-accent);

  position: absolute;
  display: flex;
  inset-inline-end: 0;
  inset-block: 0;
  max-width: var(--width);
  max-height: var(--height);
  height: fit-content;
  padding-inline: var(--padding-in);
  padding-block: var(--padding-block);

  --border-url: url(../assets/border-image-pink.png);
  --border-width: 10px;
  border-image: var(--border-url) 55 / var(--border-width) / var(--border-width)
    round;
  border-style: solid;

  --clr-bg: color-mix(in oklab, var(--clr-stamp), white 75%);
  background-color: var(--clr-bg);
  box-shadow: inset 0px 0px 1px 2px var(--clr-stamp);
  --clr-shadow: color-mix(
    in oklab,
    var(--clr-stamp),
    color-mix(in oklab, var(--clr-main), black)
  );
  filter: drop-shadow(1px 1px 3px var(--clr-shadow));

  --clr-text: color-mix(in oklab, var(--clr-stamp), black);
  font-family: var(--font-fancy);
  font-style: italic;
  color: var(--clr-text);

  --deg-rotate: 7deg;
  --deg-reverse: calc(var(--deg-rotate) * -1);

  transform: rotateZ(var(--deg-rotate));

  a {
    color: var(--clr-text);
  }
}

:is(h1, h2, h3, h4, h5, h6) {
  font-weight: bolder;
  font-family: var(--font-heading-serif);

  &:is(h4, h5, h6) {
    font-family: var(--font-heading-sans);
  }
}

hgroup {
  p {
    font-family: var(--font-heading-small);
  }
}

small {
  font-size: 0.5em;
  vertical-align: super;
}

i {
  font-style: italic;
}

@function --shift-hue(--color-in, --shift, --amount: 20, --alpha: 1) {
  --shift-out: calc(var(--shift) * sin(var(--shift)) / 211);
  --color-out: oklch(
    from var(--color-in) l c calc(h + var(--shift-out) * var(--amount)) /
      var(--alpha)
  );
  result: var(--color-out);
}

@function --color-alpha(--color-in, --alpha: 0.5) {
  --color-out: oklch(from var(--color-in) l c h / var(--alpha));
  result: var(--color-out);
}

*:has([href*="itch"]) {
  --link-bg-color: #fa5c5c;
}

*:has([href*="github"]) {
  --link-bg-color: #080808;
}

.blank {
  display: block;
  width: 100%;
  height: calc(var(--main-height) / 2);
}

.frosted-glass {
  backdrop-filter: blur(2px) var(--frosted-glass);
}

.svg-filter,
svg[hidden] {
  position: fixed;
  opacity: 0;
  z-index: -9999;
  user-select: none;
  pointer-events: none;
}