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

html,
body{
  overflow-x:hidden;
}

body{
  height:600vh;
  background:#f4f4f2;
  color:#111;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
}

.noise{
  position:fixed;
  inset:0;
  opacity:0.025;
  pointer-events:none;
  background-image:url("https://grainy-gradients.vercel.app/noise.svg");
}

.scene{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1800px;
}

.cube{
  position:relative;
  width:260px;
  height:260px;
  transform-style:preserve-3d;
  transform:rotateX(-15deg) rotateY(0deg);
  will-change:transform;
}

.face{
  position:absolute;
  width:260px;
  height:260px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.04);
  overflow:hidden;

  box-shadow:
    0 35px 70px rgba(0,0,0,0.09),
    inset 0 0 0 1px rgba(255,255,255,0.7);

  display:flex;
  align-items:center;
  justify-content:center;

  backdrop-filter:blur(10px);
}

.front{
  transform:translateZ(130px);
}

.back{
  transform:rotateY(180deg) translateZ(130px);
}

.right{
  transform:rotateY(90deg) translateZ(130px);
}

.left{
  transform:rotateY(-90deg) translateZ(130px);
}

.top{
  transform:rotateX(90deg) translateZ(130px);
  background:#fafafa;
}

.bottom{
  transform:rotateX(-90deg) translateZ(130px);

  background:
    repeating-conic-gradient(
      #ff00cc 0% 25%,
      #000000 0% 50%
    )
    50% / 40px 40px;
}

.content{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;

  padding:28px;
  text-align:center;
}

h1{
  font-size:38px;
  font-weight:600;
  letter-spacing:0.12em;
}

h2{
  font-size:12px;
  letter-spacing:0.3em;
  opacity:0.45;
}

p,
a{
  font-size:14px;
  line-height:1.6;
  color:#111;
  text-decoration:none;
}

.masq-link{
  font-size:18px;
  letter-spacing:0.18em;
}

.photo{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(0.92) contrast(1.03);
}

.scroll-hint{
  position:fixed;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);

  font-size:11px;
  letter-spacing:0.35em;
  text-transform:uppercase;
  opacity:0.32;
}

/* creeper */

.creeper{
  position:relative;
  width:120px;
  height:120px;
}

.eye{
  position:absolute;
  width:28px;
  height:28px;
  background:#111;
}

.left-eye{
  left:16px;
  top:18px;
}

.right-eye{
  right:16px;
  top:18px;
}

.mouth{
  position:absolute;
  left:34px;
  top:52px;

  width:52px;
  height:52px;

  background:#111;

  clip-path:polygon(
    0 0,
    100% 0,
    100% 40%,
    72% 40%,
    72% 100%,
    28% 100%,
    28% 40%,
    0 40%
  );
}

@media (max-width:700px){

  .cube{
    width:210px;
    height:210px;
  }

  .face{
    width:210px;
    height:210px;
  }

  .front{
    transform:translateZ(105px);
  }

  .back{
    transform:rotateY(180deg) translateZ(105px);
  }

  .right{
    transform:rotateY(90deg) translateZ(105px);
  }

  .left{
    transform:rotateY(-90deg) translateZ(105px);
  }

  .top{
    transform:rotateX(90deg) translateZ(105px);
  }

  .bottom{
    transform:rotateX(-90deg) translateZ(105px);
  }

  h1{
    font-size:30px;
  }
}