@property --mouse-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --mouse-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* --- Ensure parent fills the animation-section height --- */
.animation-section .hidden-section {
  height: 100%;
}

/* --- WRAPPER (replaces old body styles) --- */
.liminal-wrapper {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: clip;
    --look: 20;                 /* how far the vanishing point swings */
  perspective: 10em;
  perspective-origin:
    calc(50% - var(--mouse-x) * var(--look) * 1%)
    calc(50% + var(--mouse-y) * var(--look) * 1%);
  transition: --mouse-x 0.5s ease-out, --mouse-y 0.5s ease-out;
}

.tunnel_slice {
  --size-slice: 50em;
  --font-size: 6em;
  --sides: 4;
  --duration: 10s;
  --repeat-span: 1;
  width: var(--size-slice);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  grid-area: 1 / 1;
  transform: translateZ(calc(var(--font-size)*sibling-index()*-0.8 + 2em + var(--font-size)));
}

.tunnel_slice > div {
  grid-area: 1 / 1;
  height: var(--font-size);
  width: 100%;
  overflow: hidden;
  container-type: inline-size;
  position: relative;
  transform:
    rotateZ(calc(360deg / var(--sides) * sibling-index()))
    translateY(calc((var(--size-slice) - 0.05em)/ 2))
    rotateX(90deg);
}

.track {
  position: absolute;
  inset-block: 0;
  display: flex;
  align-items: center;
  animation: slide var(--duration) linear infinite reverse;
}

.track p {
flex: 0 0 calc(100cqw * var(--repeat-span));
margin: 0;
font-family: var(--inter-regular);
font-weight: 500;
font-size: var(--font-size);
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}

.tunnel_slice:nth-child(2n) .track{
animation-direction: normal;
}

@keyframes slide {
  from { translate: 0; }
  to   { translate: calc(-100cqw * var(--repeat-span)); }
}