/* =========================================================
   FONT
========================================================= */

/*
@font-face {
  font-family: 'Acidic';
  src:
    url('/assets/fonts/acidic/Acidic.woff2') format('woff2'),
    url('/assets/fonts/acidic/Acidic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*/

/* =========================================================
   ROOT / GLOBAL
========================================================= */

:root {
  --screw-size: 16pt;

  --intro-duration: 1.6s;
  --outro-duration: 1.2s;

  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   VIEWPORT LOCK
========================================================= */

html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  min-height: 100%;

  overflow-x: hidden;
  overflow-y: auto;

  position: relative;
}

main {
  padding: 6pt 12pt;
  position: relative;

  width: 100%;
  min-height: 100vh;

  overflow: hidden;
  margin-bottom: 20vh;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

.project-list {
  counter-reset: section;
}

.project-list li {
  display: flex;
  align-items: baseline;
  counter-increment: section;
}

.project-list span {
  width: 2.5ch;
  /* consistent number width */
  text-align: left;
  margin-right: 10pt;
  font-weight: bold;
  color: red;
}

.project-list span::before {
  content: counter(section) ".";
}

a {
  text-decoration: none;
  color: red;
}

ul {
  padding: 0 24pt 0 0;
  margin: 0;
}

li {
  list-style: none;
  font-size: 24pt;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes introSpin {
  0% {
    opacity: 0;
    transform:
      translate3d(0, 0, 0) rotate(0deg) scale(2.5);
  }

  15% {
    opacity: 1;
    transform:
      translate3d(0, 0, 0) rotate(90deg) scale(0.85);
  }

  45% {
    transform:
      translate3d(0, 0, 0) rotate(220deg) scale(1.1);
  }

  70% {
    transform:
      translate3d(0, 0, 0) rotate(320deg) scale(0.96);
  }

  100% {
    opacity: 1;
    transform:
      translate3d(0, 0, 0) rotate(360deg) scale(1);
  }
}

@keyframes outroSpin {
  0% {
    opacity: 1;
    transform:
      translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  40% {
    opacity: 1;
    transform:
      translate3d(0, 0, 0) rotate(180deg) scale(1.3);
  }

  70% {
    opacity: 1;
    transform:
      translate3d(0, 0, 0) rotate(300deg) scale(0.9);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(0, -140vh, 0) rotate(360deg) scale(0.6);
  }
}

@keyframes introOpacity {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================================================
   SCREW
========================================================= */

.screw {
  position: absolute;

  width: var(--screw-size);
  height: var(--screw-size);

  background-image: url("/assets/images/graphics/screw_1.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  z-index: 10;

  cursor: pointer;

  animation:
    introSpin var(--intro-duration) var(--ease-spring) both;

  /* GPU acceleration */
  will-change: transform, opacity;

  transform:
    translate3d(0, 0, 0);

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

/* =========================================================
   INTERACTION
========================================================= */

.screw:hover {
  transform:
    translate3d(0, 0, 0) scale(1.06);

  transition:
    transform 180ms ease;
}

.screw:active {
  transform:
    translate3d(0, 0, 0) scale(0.96);
}

/* =========================================================
   OUTRO STATE
========================================================= */

.screw.clicked {
  animation:
    outroSpin var(--outro-duration) ease-out forwards;
}

/* =========================================================
   SCREW HOLE
========================================================= */

.screw-hole {
  position: absolute;

  width: var(--screw-size);
  height: var(--screw-size);

  border-radius: 50%;

  z-index: 1;

  background: black;

  animation:
    introOpacity 800ms ease-out forwards;

  will-change: opacity, transform;

  transform:
    translate3d(0, 0, 0);

  overflow: hidden;
  box-shadow: none;
  filter: none;
}

/* =========================================================
   MOBILE OPTIMISATIONS
========================================================= */

@media (max-width: 768px) {
  :root {
    --intro-duration: 1.2s;
    --outro-duration: 1s;
  }

  li {
    font-size: 18pt;
  }
}

/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .screw,
  .screw.clicked,
  .screw-hole {
    animation: none !important;
    transition: none !important;
  }

  .screw {
    opacity: 1;
    transform: none;
  }
}