style.css

.stack {
  display: grid;
  grid: [stack] / [stack];
  perspective: 5000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.stack:before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgb(240, 240, 240);
  transition: background 2s ease;
  pointer-events: none;
}

/* During hover & active state */
.stack:hover:before,
.stack:active:before {
  background: rgb(37, 37, 37);
}

.stack:hover .card,
.stack:active .card {
  --bg-opacity: 5%;
  transition-duration: 2s;
  transition-timing-function: var(--easeInOutCirc);
  transform: rotateX(45deg) rotate(45deg) translateZ(var(--z-offset))
    translateY(20vh) translateX(20vh);
}

.stack:hover .card:nth-child(1),
.stack:active .card:nth-child(1) {
  --z-offset: 55vh;
}

.stack:hover .card:nth-child(2),
.stack:active .card:nth-child(2) {
  --z-offset: 30vh;
}

.stack:hover .card:nth-child(3),
.stack:active .card:nth-child(3) {
  --z-offset: 5vh;
}

.stack:hover .card:nth-child(4),
.stack:active .card:nth-child(4) {
  opacity: 0;
}

.stack:hover .card:nth-child(5),
.stack:active .card:nth-child(5) {
  opacity: 0;
}

.stack:hover .card:nth-child(1)::after,
.stack:active .card:nth-child(1)::after {
  transition-delay: 1.5s;
}

.stack:hover .card:nth-child(2)::after,
.stack:active .card:nth-child(2)::after {
  transition-delay: 1.7s;
}

.stack:hover .card:nth-child(3)::after,
.stack:active .card:nth-child(3)::after {
  transition-delay: 1.9s;
}

.stack:hover .card:nth-child(4)::after,
.stack:active .card:nth-child(4)::after {
  transition-delay: 2.1s;
}

.stack:hover .card:nth-child(5)::after,
.stack:active .card:nth-child(5)::after {
  transition-delay: 2.3s;
}

.stack:hover .card::after,
.stack:active .card::after {
  opacity: 1;
  transform: rotate(-45deg) rotateY(45deg) translateX(0px);
}

.stack:hover .card.content,
.stack:active .card.content {
  background: transparent;
  color: white;
  border-color: transparent;
  transition: border-color 1s var(--easeInOutCirc) 0s,
    background-color 1s var(--easeInOutCirc) 0s,
    color 1s var(--easeInOutCirc) 0s, transform 2s var(--easeInOutCirc) 0s;
}

.stack:hover .card.padding,
.stack:active .card.padding {
  transition-delay: 0.1s;
}

.stack:hover .card.border,
.stack:active .card.border {
  transition-delay: 0.2s;
}

.stack:hover .card.background,
.stack:active .card.background {
  background: white;
  transition: background-color 2s var(--easeInOutCirc) 0.3s,
    transform 2s var(--easeInOutCirc) 0.2s;
}

.stack:hover .card.box-shadow,
.stack:active .card.box-shadow {
  transition-delay: 0.4s;
  box-shadow: 0 -1px 25px rgba(0, 0, 0, 0.4), 0 7.6px 6.1px rgba(0, 0, 0, 0.051),
    0 14.3px 11.5px rgba(0, 0, 0, 0.059), 0 25.5px 20.5px rgba(0, 0, 0, 0.07),
    0 47.6px 38.4px rgba(0, 0, 0, 0.094), 0 114px 92px rgba(0, 0, 0, 0.19);
}

/* Card in default state */
.card {
  grid-area: stack;

  --z-offset: 0;
  --easeInOutCirc: cubic-bezier(0.85, 0, 0.15, 1);
  --bg-opacity: 0%;

  transition: transform 4s ease, opacity 4s ease 0.3s;

  width: 40vmin;
  height: 40vmin;
  box-sizing: border-box;
  color: white;
  box-sizing: border-box;
  background: rgba(255, 255, 254, 0.05);
  position: relative;
}

@media (orientation: landscape) {
  .card {
    width: 40vh;
    height: 40vh;
  }
}

@media (max-width: 540px) {
  .card {
    width: 60vw;
    height: 60vw;
  }
}

.card:nth-child(1) {
  z-index: 3;
}

.card:nth-child(2) {
  z-index: 2;
}

.card::after {
  content: "Box";
  position: absolute;
  left: -45%;
  top: 110%;
  font-size: 1.25rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
  padding: 1ch 2ch;
  border-radius: 4ch;
  opacity: 0;
  transition: opacity 0.5s ease 0s, transform 0.5s ease;
  transform: rotate(-45deg) rotateY(45deg) translateX(20px);
  background: rgba(0, 0, 0, 0.7);
}

@media (max-width: 540px) {
  .card::after {
    left: -20%;
    top: 70%;
  }
}

.card.content {
  z-index: 5;
  transition: border-color 4s ease, background-color 5s ease 2s,
    color 4s ease 0s, transform 4s ease 0s;
  background: transparent;
}

.card .pixel {
  box-shadow: 0px 0px 1px #fff;
}

.card.content,
.card.padding,
.card.border {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
}

/* meat */
.card.content .pixel:nth-child(40),
.card.content .pixel:nth-child(54),
.card.content .pixel:nth-child(55),
.card.content .pixel:nth-child(68),
.card.content .pixel:nth-child(69),
.card.content .pixel:nth-child(71),
.card.content .pixel:nth-child(82),
.card.content .pixel:nth-child(83),
.card.content .pixel:nth-child(84),
.card.content .pixel:nth-child(85),
.card.content .pixel:nth-child(86),
.card.content .pixel:nth-child(96),
.card.content .pixel:nth-child(97),
.card.content .pixel:nth-child(98),
.card.content .pixel:nth-child(100),
.card.content .pixel:nth-child(101),
.card.content .pixel:nth-child(110),
.card.content .pixel:nth-child(111),
.card.content .pixel:nth-child(112),
.card.content .pixel:nth-child(113),
.card.content .pixel:nth-child(114),
.card.content .pixel:nth-child(115),
.card.content .pixel:nth-child(116),
.card.content .pixel:nth-child(124),
.card.content .pixel:nth-child(125),
.card.content .pixel:nth-child(126),
.card.content .pixel:nth-child(128),
.card.content .pixel:nth-child(129),
.card.content .pixel:nth-child(130),
.card.content .pixel:nth-child(138),
.card.content .pixel:nth-child(139),
.card.content .pixel:nth-child(141),
.card.content .pixel:nth-child(142),
.card.content .pixel:nth-child(143),
.card.content .pixel:nth-child(144),
.card.content .pixel:nth-child(145),
.card.content .pixel:nth-child(155),
.card.content .pixel:nth-child(156),
.card.content .pixel:nth-child(157),
.card.content .pixel:nth-child(158) {
  background: #e7302b;
}

/* pink meat */
.card.content .pixel:nth-child(41),
.card.content .pixel:nth-child(56),
.card.content .pixel:nth-child(57),
.card.content .pixel:nth-child(72),
.card.content .pixel:nth-child(87),
.card.content .pixel:nth-child(102),
.card.content .pixel:nth-child(117),
.card.content .pixel:nth-child(131),
.card.content .pixel:nth-child(132),
.card.content .pixel:nth-child(153),
.card.content .pixel:nth-child(146),
.card.content .pixel:nth-child(154),
.card.content .pixel:nth-child(159),
.card.content .pixel:nth-child(160),
.card.content .pixel:nth-child(169),
.card.content .pixel:nth-child(170),
.card.content .pixel:nth-child(171),
.card.content .pixel:nth-child(172),
.card.content .pixel:nth-child(173),
.card.content .pixel:nth-child(174) {
  background: #f5abb2;
}

.card.content::after {
  content: "Flesh";
  left: -50%;
}

@media (max-width: 540px) {
  .card.content::after {
    left: -23%;
  }
}

.card.padding {
  background: transparent;
  z-index: 4;
  transition-delay: 0.1s;
}

/* seed */
.card.padding .pixel:nth-child(70),
.card.padding .pixel:nth-child(99),
.card.padding .pixel:nth-child(127),
.card.padding .pixel:nth-child(140) {
  background: #000;
}

.card.padding::after {
  content: "Seeds";
}

.card.padding::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-clip-path: polygon(
    0% 0%,
    0% 100%,
    5vmin 100%,
    5vmin 5vmin,
    calc(100% - 5vmin) 5vmin,
    calc(100% - 5vmin) calc(100% - 5vmin),
    5vmin calc(100% - 5vmin),
    5vmin 100%,
    100% 100%,
    100% 0%
  );
  clip-path: polygon(
    0% 0%,
    0% 100%,
    5vmin 100%,
    5vmin 5vmin,
    calc(100% - 5vmin) 5vmin,
    calc(100% - 5vmin) calc(100% - 5vmin),
    5vmin calc(100% - 5vmin),
    5vmin 100%,
    100% 100%,
    100% 0%
  );
  background: transparent;
}

.card.border {
  z-index: 3;
  background: transparent;
  transition-delay: 0.2s;
}

/* green skin */
.card.border .pixel:nth-child(27),
.card.border .pixel:nth-child(43),
.card.border .pixel:nth-child(59),
.card.border .pixel:nth-child(74),
.card.border .pixel:nth-child(89),
.card.border .pixel:nth-child(104),
.card.border .pixel:nth-child(119),
.card.border .pixel:nth-child(134),
.card.border .pixel:nth-child(148),
.card.border .pixel:nth-child(162),
.card.border .pixel:nth-child(163),
.card.border .pixel:nth-child(167),
.card.border .pixel:nth-child(176),
.card.border .pixel:nth-child(177),
.card.border .pixel:nth-child(183),
.card.border .pixel:nth-child(190),
.card.border .pixel:nth-child(191),
.card.border .pixel:nth-child(199),
.card.border .pixel:nth-child(200),
.card.border .pixel:nth-child(201),
.card.border .pixel:nth-child(202),
.card.border .pixel:nth-child(203),
.card.border .pixel:nth-child(204) {
  background: #0c8e35;
}

/* lightgreen skin */
.card.border .pixel:nth-child(26),
.card.border .pixel:nth-child(42),
.card.border .pixel:nth-child(58),
.card.border .pixel:nth-child(73),
.card.border .pixel:nth-child(88),
.card.border .pixel:nth-child(103),
.card.border .pixel:nth-child(118),
.card.border .pixel:nth-child(133),
.card.border .pixel:nth-child(147),
.card.border .pixel:nth-child(152),
.card.border .pixel:nth-child(161),
.card.border .pixel:nth-child(168),
.card.border .pixel:nth-child(175),
.card.border .pixel:nth-child(184),
.card.border .pixel:nth-child(185),
.card.border .pixel:nth-child(186),
.card.border .pixel:nth-child(187),
.card.border .pixel:nth-child(188),
.card.border .pixel:nth-child(189) {
  background: #94c21f;
}

.card.border::after {
  content: "Rind & Skin";
}

.card.border::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-clip-path: polygon(
    0% 0%,
    0% 100%,
    5px 100%,
    5px 5px,
    calc(100% - 5px) 5px,
    calc(100% - 5px) calc(100% - 5px),
    5px calc(100% - 5px),
    5px 100%,
    100% 100%,
    100% 0%
  );
  clip-path: polygon(
    0% 0%,
    0% 100%,
    5px 100%,
    5px 5px,
    calc(100% - 5px) 5px,
    calc(100% - 5px) calc(100% - 5px),
    5px calc(100% - 5px),
    5px 100%,
    100% 100%,
    100% 0%
  );
}

.card.background {
  z-index: 2;
  opacity: 1;
  transition: background-color 4s ease 0.3s, transform 4s ease 0.3s, opacity 4s ease 0.3s;
}

.card.background::after {
  content: "Background Box";
}

.card.box-shadow {
  z-index: 1;
  background: transparent;
  opacity: 1;
  transition: box-shadow 4s ease 0.4s, transform 4s ease 0.4s, opacity 4s ease 0.3s;

  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
    0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035),
    0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05),
    0 100px 80px rgba(0, 0, 0, 0.07);
}

.card.box-shadow::after {
  content: "Shadow Box";
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
    Noto Sans, sans-serif;
  background: rgb(70, 70, 70);
}

p:first-of-type {
  margin-top: 0;
}

@media (hover: hover) {
  #mobile-prompt {
    display: none;
  }
}

@media (hover: none) {
  #desktop-prompt {
    display: none;
  }
}