*,
*::before,
*::after { box-sizing: border-box; }

:root {
  color-scheme: dark;
  --tx: 0deg;
  --ty: 0deg;
  --px: 50%;
  --py: 50%;
}

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #08090a;
}

body {
  min-height: 100svh;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  cursor: crosshair;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(80vw 60vw at 50% 44%, #1b1d20 0%, #101214 38%, #08090a 72%);
}

.ambient,
.blade,
.grain,
.vignette,
.baseline,
.pulse {
  pointer-events: none;
}

.ambient {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(circle at var(--px) var(--py),
      rgba(135,145,157,.14) 0,
      rgba(64,70,78,.07) 22%,
      rgba(0,0,0,0) 48%);
  will-change: background-position;
}

.blade {
  position: absolute;
  z-index: 1;
  left: -35vw;
  top: -20vh;
  width: 36vw;
  height: 140vh;
  transform: rotate(-14deg);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.02) 42%,
    rgba(235,240,246,.10) 49%,
    rgba(255,255,255,.19) 50%,
    rgba(189,198,208,.06) 53%,
    rgba(255,255,255,0) 64%
  );
  filter: blur(1px);
  opacity: .75;
  animation: bladeSweep 12s linear infinite;
  will-change: transform;
  transform-origin: 50% 50%;
}

.monolith-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(94vw, 1800px);
  height: 34vw;
  min-height: 18rem;
  max-height: 48vh;
  z-index: 3;
  transform-style: preserve-3d;
  transform:
    translate3d(-50%, -50%, 0)
    perspective(1400px)
    rotateX(var(--tx))
    rotateY(var(--ty));
  transition: transform 90ms linear;
  will-change: transform;
  contain: layout paint style;
  user-select: none;
  -webkit-user-select: none;
}

.word {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(6.2rem, 20.8vw, 26rem);
  font-weight: 900;
  line-height: .72;
  letter-spacing: -.085em;
  white-space: nowrap;
  transform-origin: center;
  backface-visibility: hidden;
}

.depth {
  color: #17191b;
  transform: translate3d(10px, 13px, -26px);
  text-shadow:
    2px 2px 0 #141618,
    4px 4px 0 #121416,
    6px 6px 0 #101214,
    8px 8px 0 #0e1012,
    0 22px 34px rgba(0,0,0,.60);
}

.face {
  z-index: 2;
  background: linear-gradient(
    102deg,
    #9fa3a7 0%,
    #efede7 20%,
    #c7c9ca 36%,
    #f4f1ea 50%,
    #9ca1a6 67%,
    #e9e7e1 84%,
    #b8bcc0 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.42));
}

.edge {
  z-index: 4;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.13);
  opacity: .8;
}

.specular {
  position: absolute;
  z-index: 5;
  inset: -10%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 42%,
    rgba(255,255,255,.04) 47%,
    rgba(255,255,255,.58) 50%,
    rgba(255,255,255,.07) 53%,
    transparent 58%,
    transparent 100%
  );
  mix-blend-mode: screen;
  animation: specularSweep 8.5s ease-in-out infinite;
  will-change: transform;
}

.monolith-wrap::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 2%;
  bottom: -11%;
  height: 10%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.03) 18%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.02) 82%,
    transparent
  );
  filter: blur(10px);
  transform: perspective(400px) rotateX(68deg);
  transform-origin: top;
  opacity: .65;
}

.pulse {
  position: absolute;
  z-index: 6;
  left: var(--px);
  top: var(--py);
  width: 24vmax;
  height: 24vmax;
  margin-left: -12vmax;
  margin-top: -12vmax;
  border: 1px solid rgba(230,236,242,.36);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.08);
  will-change: transform, opacity;
}

.stage.pulsing .pulse {
  animation: pulse .62s cubic-bezier(.2,.65,.2,1);
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 9;
  opacity: .028;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  box-shadow: inset 0 0 14vw 4vw rgba(0,0,0,.68);
}

.baseline {
  position: absolute;
  left: 4vw;
  right: 4vw;
  bottom: 4vh;
  z-index: 2;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.10) 14%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.10) 86%,
    transparent
  );
}

@keyframes specularSweep {
  0%, 8% { transform: translate3d(-68%, 0, 0) skewX(-7deg); }
  50%, 58% { transform: translate3d(68%, 0, 0) skewX(-7deg); }
  100% { transform: translate3d(-68%, 0, 0) skewX(-7deg); }
}

@keyframes bladeSweep {
  from { transform: translate3d(-10vw, 0, 0) rotate(-14deg); }
  to   { transform: translate3d(145vw, 0, 0) rotate(-14deg); }
}

@keyframes pulse {
  0%   { opacity: 0; transform: scale(.08); }
  15%  { opacity: .75; }
  100% { opacity: 0; transform: scale(2.7); }
}

@media (max-width: 760px) {
  .monolith-wrap {
    width: 96vw;
    height: 40vw;
    min-height: 10rem;
  }

  .word {
    font-size: clamp(4.6rem, 21.5vw, 9rem);
    letter-spacing: -.09em;
  }

  .depth {
    transform: translate3d(6px, 8px, -18px);
    text-shadow:
      2px 2px 0 #141618,
      4px 4px 0 #111315,
      0 16px 24px rgba(0,0,0,.52);
  }

  .blade {
    opacity: .58;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blade,
  .specular {
    animation: none;
  }

  .monolith-wrap {
    transition: none;
    transform: translate3d(-50%, -50%, 0);
  }
}