.project {
  background: var(--color-white);
  box-shadow: var(--box-shadow-intro);
  container-type: inline-size;
  display: grid;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

.project__background {
  background: var(--color-white);
  display: grid;
  grid-area: 1 / 1;
  pointer-events: none;
}

.project__background img {
  transition: opacity var(--transition-slow);
}

.project__header {
  grid-area: 1 / 1;
}

.project__star,
.project__star:after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 125% auto;
}

.project__star {
  background-image: url('/assets/images/project/star-off-light.webp');
  cursor: pointer;
  height: 5%;
  left: 43.875%;
  pointer-events: auto;
  position: absolute;
  top: 2.125%;
  width: 3.5%;
}

.project__star:after {
  background-image: url('/assets/images/project/star-on-light.webp');
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(1.5);
  transition:
    opacity var(--transition),
    transform var(--transition)
  ;
  will-change: transform;
}

.project__star--on:after {
  opacity: 1;
  transform: scale(1);
}

.project__tools {
  align-content: start;
  display: grid;
  gap: 6.675% 1.7875%;
  grid-area: 1 / 1;
  grid-template-columns: repeat(3, 1fr);
  padding-inline: 3.75%;
  padding-top: 14.2375%;
  pointer-events: none;
  position: relative;
}

.project__tools .project__tool:first-child {
  z-index: 1;
}

.project__tools .project__tool:first-child:after {
  animation: tool-pulse 2s ease-in-out infinite;
  border-radius: 0.325em;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity var(--transition-slow);
}

.project__tool {
  pointer-events: auto;
  cursor: pointer;
  position: relative;
}

.project__tool img {
  border-radius: 0.325em;
  outline: max(1px, 0.05em) solid oklch(0.9204 0.0022 197.12);
  overflow: clip;
  pointer-events: none;
}

.project__tool:before {
  bottom: 100%;
  content: '';
  height: 13%;
  position: absolute;
}

.project__tool--message-board:before {
  width: 39.725%;
}

.project__tool--docs-and-files:before {
  width: 31.2875%;
}

.project__tool--to-dos:before {
  width: 33.7125%;
}

.project__tool--chat:before {
  width: 12.175%;
}

.project__tool--schedule:before {
  width: 24.2375%;
}

.project__tool--card-table:before {
  width: 24.3125%;
}

.project__views {
  display: grid;
  grid-area: 1 / 1;
  overflow: clip;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.project__view {
  display: grid;
  grid-area: 1 / 1;
  position: relative;
  transform: translateY(100%);
  transition: transform var(--transition-slow);
  will-change: transform;
}

.project__view img {
  pointer-events: none;
}

.project__view--message-board .project__extra {
  height: 9.375%;
  left: 3.75%;
  right: 3.75%;
  top: 36.125%;
}

.project__view--message-board .project__extra span {
  left: 88.5%;
  top: 9%;
}

.project__view--docs-and-files .project__extra {
  height: 9.125%;
  left: 3.75%;
  right: 3.75%;
  top: 16.875%;
}

.project__view--docs-and-files .project__extra span {
  left: 10.25%;
  top: -1.5%;
}

.project__view--to-dos .project__extra {
  height: 4.25%;
  left: 5.5%;
  top: 57.125%;
  width: 56.25%;
}

.project__view--to-dos .project__extra span {
  left: 16.5%;
  top: -107%;
}

.project__view--card-table .project__extra {
  height: 8%;
  left: 26.375%;
  top: 67.75%;
  width: 22%;
}

.project__view--card-table .project__extra span {
  left: 4.5%;
  top: 9%;
}

.project__view--selected {
  pointer-events: auto;
  transform: translateY(0);
}

.project__pages {
  display: grid;
  grid-area: 1 / 1;
  overflow: clip;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.project__page {
  display: grid;
  grid-area: 1 / 1;
  transform: translateY(100%);
  transition: transform var(--transition-slow);
  will-change: transform;
}

.project__page img {
  pointer-events: none;
}

.project__page--selected {
  pointer-events: auto;
  transform: translateY(0);
}

.project__back {
  align-items: start;
  display: flex;
  grid-area: 1 / 1;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.project__back .button {
  box-shadow: var(--box-shadow-button);
  filter: blur(0.1em);
  opacity: 0;
  pointer-events: none;
  transform: scale(1.1) translateY(-100%);
  transition:
    filter var(--transition-slow),
    opacity var(--transition-slow),
    transform var(--transition-slow)
  ;
  will-change: transform;
}

.project__cursor {
  animation: cursor-fade 1s ease-in-out 0.75s both;
  grid-area: 1 / 1;
  overflow: clip;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.project__cursor span {
  animation: cursor-move 1s ease-in-out 0.75s both;
  left: 17.5%;
  top: 9.125%;
}

.project__extra {
  cursor: pointer;
  pointer-events: auto;
  position: absolute;
}

.project__cursor span,
.project__extra span {
  aspect-ratio: 1;
  position: absolute;
  transition: opacity var(--transition-slow);
  width: 17.5cqw;
}

.project__cursor span:after,
.project__extra span:after {
  animation: cursor-click 2s ease-in-out infinite;
  background: url('/assets/images/project/pointer.webp') center / contain no-repeat;
  content: '';
  inset: 0;
  position: absolute;
  will-change: transform;
}



.project--selected .project__background img {
  opacity: 0;
}

.project--selected .project__tools .project__tool:first-child:after {
  opacity: 0;
}

.project--selected .project__cursor span {
  opacity: 0;
}

.project--selected .project__back .button {
  filter: blur(0);
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(-50%);
}



@media(hover: hover) {

  .project__tool img {
    transition:
      box-shadow var(--transition),
      outline var(--transition),
      transform var(--transition)
    ;
    will-change: transform;
  }

  .project__tool:focus img,
  .project__tool:hover img {
    box-shadow:
      0 0.2em 1.6em -0.5em oklch(var(--oklch-blue) / 0.3),
      0 0.3em 2.0em -0.6em oklch(var(--oklch-blue) / 0.3),
      0 0.3em 0.8em -0.7em oklch(var(--oklch-blue) / 0.3),
      0 0.5em 1.2em -0.9em oklch(var(--oklch-blue) / 0.3),
      0 0.7em 1.6em -1.1em oklch(var(--oklch-blue) / 0.3)
    ;
    outline: max(1.5px, 0.075em) solid var(--color-blue);
    transform: scale(1.03);
  }

  .project__tool:active img {
    transform: scale(1) translateY(0.05em);
  }

  .project:hover .project__tools .project__tool:first-child:after,
  .project:focus-within .project__tools .project__tool:first-child:after {
    opacity: 0;
  }

  .project:hover .project__cursor span {
    opacity: 0;
  }

}



@media(prefers-color-scheme: dark) {

  .project__background {
    background: oklch(0.2745 0.0157 232.41);
  }

  .project__star {
    background-image: url('/assets/images/project/star-off-dark.webp');
  }

  .project__star--on:after {
    background-image: url('/assets/images/project/star-on-dark.webp');
  }

  .project__tool img {
    outline-color: oklch(0.4308 0.0162 226.91);
  }

}



@keyframes tool-pulse {

  from, to {
    box-shadow:
      0 0 0.4em -0.2em oklch(var(--oklch-blue) / 0),
      0 0 0.8em -0.4em oklch(var(--oklch-blue) / 0),
      0 0 1.2em -0.6em oklch(var(--oklch-blue) / 0)
    ;
  }

  50% {
    box-shadow:
      0 0 0.8em 0.1em oklch(var(--oklch-blue) / 0.2),
      0 0 1.6em 0.2em oklch(var(--oklch-blue) / 0.3),
      0 0 2.4em 0.3em oklch(var(--oklch-blue) / 0.4)
    ;
  }

}



@keyframes cursor-move {

  from {
    left: 95%;
    top: 85%;
  }

}



@keyframes cursor-fade {

  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

}



@keyframes cursor-click {

  0%, 8%, 16%, 100% {
    transform: scale(1);
  }

  4%, 12% {
    transform: scale(0.7);
  }

}