:root {
  --bg-color: #f9f9fb;
  --heading-color: #1d1d1f;
  --text-color: #3a3b40;
  --indigo-500: #6366f1;
  --emerald-500: #10b981;
  --dark-obsidian-indigo: #160029;

  --fade-speed: 300ms;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-color);
}

main {
  width: 100%;
}

h1,
h2,
h3 {
  color: var(--heading-color);
  line-height: 1.5em;
  font-family: "Poppins", sans-serif;
  text-align: center;
  width: 100%;
  margin-bottom: 24px;
  text-wrap: balance;
}

h1 {
  font-size: 30px;
  font-weight: 600;

  @media screen and (max-width: 366px) {
    font-size: 26px;
  }
}

h2 {
  font-size: 28px;
  font-weight: 500;
}

h3 {
  font-size: 24px;
  font-weight: 500;
}

p {
  font-family: "Open Sans", sans-serif;
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.5em;
  width: 100%;
  max-width: 980px;
  text-wrap: pretty;
  margin-inline: auto;
  text-align: center;

  &#lblQuote {
    font-style: italic;
    color: #51525a;
    margin-top: 24px;
  }

  &.footnote {
    font-size: 12px;
  }
}

@property --electron-drop-shadow {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

svg#svgLogo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 300px;
  margin-inline: auto;
  transform: translateZ(0);

  #Electron01 {
    scale: 0;
    transform-origin: 33% 8%;
  }

  #Electron02 {
    --electron-drop-shadow: 0px;

    transform-origin: 50% 50%;
    color: var(--indigo-500);
    opacity: 0.7;
    transform: scale(0.8);
    offset-path: path(
      "M355.5 71.5C352.812 71.8347 346.736 73.1838 341.319 75.5473C336.014 77.862 330.506 78.9252 325.089 80.6243C319.675 82.3224 314.276 85.0114 308.859 87.5524C303.567 90.0347 298.715 93.7958 292.802 96.0072C287.193 98.1042 283.5 102.925 278.261 106.481C271.317 111.192 261.955 118.542 257.725 122.782C253.446 127.072 249.438 131.729 244.878 136.137C240.659 140.215 236.596 144.916 233.543 150.5C230.202 156.61 226.5 160.5 224 166C220.731 173.192 216.559 177.493 212.842 182.91C209.121 188.331 206.416 193.723 204.717 199.139C203.045 204.467 203.07 204.853 201.715 210.27C200.361 215.687 199.012 221.083 198.5 226.5C198.241 229.232 196.683 235.853 195.668 248.259C193.075 279.976 195.658 302.802 196.5 305.5C198.242 311.081 198.624 313.583 201.5 319C206.809 329 204.636 328.021 209.333 333.779C213.428 338.8 216.925 344.593 221.5 349C226.089 353.421 231.583 358.493 237 361.024C242.87 363.767 247.247 366.631 253.505 368C259.434 369.297 264.5 372.162 270.882 372.162C273.71 372.162 276.298 373.689 289.373 374.196C323.178 375.507 347.304 373.699 350.002 372.182C355.651 369.008 360.816 364.59 366.065 361.024C370.854 357.771 376.031 353.432 381.28 350.541C386.953 347.417 389.563 340.245 393.123 334.661C396.522 329.331 394.655 313.628 390.952 305.067C387.524 297.138 376.761 290.865 372.187 287.482C367.664 284.138 358.199 284.089 349.216 283.247C341.029 282.48 337.198 286.64 334.5 287.482C328.928 289.221 323.821 293.636 321.286 295C315.625 298.045 325.99 281.726 326 246C326.002 237.037 318.997 230.398 316.5 229C306.5 223.4 306.847 224.42 298.34 223.4C282.5 221.5 272.281 227.609 267.707 231.494C262.402 235.999 257.735 239.437 253.505 244.509C248.662 250.316 246.221 256.761 243 262C239.312 268 239.187 276.916 238 282.5C236.694 288.647 237.842 295.608 237 315.5C236.447 328.565 240.665 360.766 241 374.196C241.439 391.795 252.968 456.583 254.5 462C256.621 469.5 258.207 474.99 260.408 482.541C262 488 263.5 492.5 267 499C269.648 503.917 272.44 510.425 277 515C281.56 519.575 283.241 525.741 289.5 532C295.759 538.259 300.092 540.94 304.5 545.5C308.579 549.719 312.751 553.624 318 556.5C323.078 559.282 329.925 562.795 334.5 566C339.274 569.345 344.5 571 351 573C356.532 574.702 360.353 577.929 366.5 579.098C376.5 581 387.236 581.5 394.5 581.5C402 581.5 419.424 582.525 434.5 577.5C440.5 575.5 446.023 572.515 451.272 569.142C456.233 565.955 463.993 559.739 469.5 556.5C478 551.5 481.5 548 487.5 543C495.144 536.63 512.453 513.917 516.5 508.5"
    );
    will-change: offset-distance, transform, opacity, color;
    filter: drop-shadow(0 0 var(--electron-drop-shadow) #8b5cf6);
  }

  &.animate {
    #Electron01 {
      animation: electronIn 1s 8s linear forwards;
    }

    #Electron02 {
      animation:
        electronPath 6s 1s cubic-bezier(0.25, 1, 0.5, 1) forwards,
        removeGlow 1s 8s linear forwards;
    }
  }
}

div.down-arrow {
  margin-block: 30px;

  @media screen and (max-width: 768px) {
    margin-block: 20px;
  }

  svg {
    display: block;
    width: 34px;
    height: auto;
    margin-inline: auto;
    translate: 0 -20%;
    animation: caretJump 500ms 9s ease-out 3;
  }
}

div.flex {
  display: flex;
  gap: 30px;

  > div {
    flex: 1;
  }
}

a.button {
  font-family: "Open Sans", sans-serif;
}

footer {
  padding: 1em 30px;

  p.footnote {
    max-width: 1200px;
    text-align: left;
  }

  @media screen and (max-width: 768px) {
    padding: 1em 20px;
  }
}

a.logo,
picture {
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

section.quantum-jump-labs {
  padding: 1em 30px 0;

  @media screen and (max-width: 768px) {
    padding: 20px 20px 0;
  }
}

section.portfolio {
  > h2 {
    position: relative;
    translate: 0 30%;
    opacity: 0;

    &:not(.go) {
      animation: fadeInUp var(--fade-speed) 10s ease-out forwards;
    }

    &.go {
      animation: fadeInUpInstant var(--fade-speed) 0s ease-out forwards;
    }
  }
}

section.glow-up {
  background-color: var(--dark-obsidian-indigo);
  padding: 30px;
  text-align: center;

  @media screen and (max-width: 768px) {
    padding: 20px;
  }

  > a,
  > h3,
  > p {
    position: relative;
    translate: 0 30%;
    opacity: 0;
  }

  &.go {
    > a,
    > h3,
    > p {
      animation: fadeInUp var(--fade-speed) calc(var(--delay) * var(--fade-speed) * 0.75) ease-out forwards;
    }
  }

  > a.logo {
    display: block;
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
    margin-bottom: 24px;

    @media screen and (max-width: 768px) {
      max-width: 240px;
    }
  }

  > h3,
  > p {
    color: white;
  }

  a.button {
    display: inline-block;
    text-decoration: none;
    color: var(--dark-obsidian-indigo);
    background-color: white;
    padding: 12px 18px;
    border-radius: 5px;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    font-weight: 600;
    margin-block: 24px;
    transition: box-shadow 250ms;

    &:hover {
      box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.15);
    }
  }

  div.block,
  picture.screenshot {
    &.animation {
      position: relative;
      translate: 0 20%;
      opacity: 0;

      &.go {
        animation: fadeInUpBlock calc(2 * var(--fade-speed)) ease-out forwards;
      }
    }
  }

  div.block {
    margin-block: 60px;
    width: 100%;
    max-width: 768px;
    margin-inline: auto;
    background-color: white;
    padding: 30px;
    border-radius: 8px;

    @media screen and (max-width: 768px) {
      margin-block: 40px;
      padding: 15px;
    }

    a.button {
      background-color: var(--dark-obsidian-indigo);
      color: white;
      margin-top: 0;

      &:last-child {
        margin-bottom: 0;
      }
    }

    h3,
    p {
      &:not(:last-child) {
        margin-bottom: 12px;
      }
    }
  }

  > picture.screenshot {
    display: block;
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
    margin-top: 30px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.5);
  }

  div.flex {
    margin-top: 24px;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    background-color: white;
    padding: 30px;
    border-radius: 8px;

    @media screen and (max-width: 1000px) {
      flex-direction: column;
    }

    @media screen and (max-width: 768px) {
      padding: 15px;
    }

    a.button {
      background-color: var(--dark-obsidian-indigo);
      color: white;
    }

    > div {
      h3,
      p {
        text-align: left;
        text-wrap: auto;

        &:not(:last-child) {
          margin-bottom: 12px;
        }
      }

      &:has(picture) {
        display: flex;
        gap: 15px;

        picture {
          width: 100%;
        }
      }
    }
  }
}

/* animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    translate: 0 30%;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes fadeInUpInstant {
  from {
    opacity: 0;
    translate: 0 30%;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes fadeInUpBlock {
  from {
    opacity: 0;
    translate: 0 20%;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes electronPath {
  0% {
    --electron-drop-shadow: 0px;
    offset-distance: 0%;
    transform: scale(0.8);
    opacity: 0.7;
  }

  35% {
    offset-distance: 35%;
    transform: scale(1.3) translate(0, 0);
    opacity: 1;
  }

  35.6% {
    transform: scale(1.1) translate(-1.5px, 1px);
  }

  36.2% {
    transform: scale(1.3) translate(1.5px, -1px);
  }

  36.8% {
    transform: scale(1.15) translate(-1px, -1.5px);
  }

  37.4% {
    transform: scale(1.35) translate(1px, 1.5px);
  }

  38% {
    --electron-drop-shadow: 0;
    transform: scale(0) translate(0, 0);
    opacity: 0;
    color: var(--indigo-500);
  }

  43% {
    --electron-drop-shadow: 10px;
    offset-distance: 60%;
    transform: scale(0);
    opacity: 0;
    color: var(--emerald-500);
  }

  46% {
    --electron-drop-shadow: 40px;
    transform: scale(1.4);
    opacity: 1;
  }

  100% {
    --electron-drop-shadow: 20px;
    offset-distance: 100%;
    transform: scale(1);
    opacity: 1;
    color: var(--emerald-500);
  }
}

@keyframes removeGlow {
  from {
    --electron-drop-shadow: 20px;
  }

  to {
    --electron-drop-shadow: 0;
  }
}

@keyframes electronIn {
  from {
    scale: 0;
  }

  to {
    scale: 1;
  }
}

@keyframes caretJump {
  0%,
  100% {
    translate: 0 -20%;
  }
  50% {
    translate: 0 20%;
  }
}