/* 3D text band */

:root{
  --tracking: 0.02em;       
  --radius: 22dvw;           
  --font-size: 6dvw;         
}

.rig{
  transform-style: preserve-3d;
  will-change: transform;
}

.band{
  position: relative;
  width: 100%;
  height: 200px; /* visual working area only */
  transform-style: preserve-3d;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.45));
}

.char{
  position:absolute;
  left:50%;
  top:50%;
  transform-style: preserve-3d;
  font-size: var(--font-size);
  letter-spacing: var(--tracking);
  color: var(--ink);
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  white-space: pre; /* keep spaces */
  transform-origin: center center;
}

.band-char{
  text-shadow:
    0 0 7px #ff0,
    0 0 10px #fff,
    0 0 21px #ff0,
    0 0 42px #f00,
    0 0 82px #f00,
    0 0 92px #f00,
    0 0 102px #f00,
    0 0 151px #f00;
}

/* Soft vignette top/bottom to sell depth */
.band::after{
  content:"";
  position:absolute;
  inset:-40% -30%;
  pointer-events:none;
  background:
    radial-gradient(120% 28% at 50% -10%, rgba(0,0,0,.35), transparent 60%),
    radial-gradient(120% 28% at 50% 110%, rgba(0,0,0,.55), transparent 60%);
  transform: translateZ(calc(var(--radius) * -1));
}

/* Offscreen measurer for accurate glyph widths */
.measure{
  position: fixed;
  left: -9999px;
  top: -9999px;
  visibility: hidden;
  font-size: var(--font-size);
  letter-spacing: var(--tracking);
  white-space: pre; /* measure spaces too */
}

/* Positioning of the band block in the scene */

.band-container{
  position: absolute;
  top: 63dvw;
  right: 32%;
}

#rig{
  position: absolute;
  top: -100px;
}

@media (max-width: 1024px) {
  /* Hide certain elements on mobile */
  .band-container {
    display: none;
  }
}