/* Helper to ensure canvas covers the container */
#tunnel-canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

#tunnelCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* 
   Living Words / CSS3D Styles 
   Copied and scoped from Native/styles.css 
*/


.lw-text-panel.lw-hero {
  font-size: 52px;
}

.lw-text-panel.lw-title {
  font-size: 64px;
}

.lw-root,
.lw-root * {
  box-sizing: border-box;
}

.lw-root {
  width: 1000px;
  height: 562px;
  position: relative;
  overflow: hidden;
  border-radius: 0;
}


.lw-root .lw-content {
  width: 1000px;
  height: 562px;
  border-radius: 0;
  animation: lw-brightness 200s linear infinite;
  /* Reset potentially inherited flex properties if any, though explicit width/height usually handles it */
  display: block; 
}


.lw-root .container-full,
.lw-root .face {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.lw-root .container-full {
  width: 1000px;
  height: 562px;
  margin: 0;
  justify-content: center;
  transform: scale(1);
  animation: lw-zoom-in 200s linear infinite;
  position: relative;
}

.lw-root .backgroundImage {
  position: absolute;
  width: 1000px;
}

.lw-root .boyImage {
  position: absolute;
  width: 1000px;
  z-index: 2;
  transform: translateZ(10px); /* Separate from background */
}


.lw-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lw-root .cube,
.lw-root .face {
  width: 870px;
  height: 190px;
}


.lw-root .cube {
  position: relative;
  transform-style: preserve-3d;
  perspective: 480px;
  perspective-origin: 51% 70%;
  will-change: transform;
}

.lw-root .face {
  position: absolute;
  background: transparent;
  border: 0 solid #000;
  opacity: 0.5;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.lw-root .bottom,
.lw-root .top {
  width: 870px;
  height: 870px;
}

.lw-root p {
  white-space: nowrap;
  overflow: hidden;
  font-family: "Outfit", sans-serif;
  font-weight: 400;
  font-size: calc(6em + (190px / 10) * 0.7);
  padding-top: 0px;
  color: #fff;
  margin: 0;
  transform: translateZ(50px); /* Lift text significantly to prevent z-fighting */
}

.lw-root span {
  color: red;
}

.lw-root .front {
  transform: translateZ(435px);
  display: none;
}

.lw-root .back {
  transform: translateZ(-435px) rotateY(180deg) scaleX(-1);
}

.lw-root .left {
  transform: translateX(-435px) rotateY(-90deg) scaleX(-1);
}

.lw-root .right {
  transform: translateX(435px) rotateY(90deg) scaleX(-1);
}

.lw-root .top {
  transform: translateY(-435px) rotateX(90deg) scaleY(-1);
}

.lw-root .bottom {
  transform: translateY(-245px) rotateX(-90deg) scaleY(-1);
}

.lw-root .left p {
  margin-left: 480px;
  animation: lw-left 200s linear infinite;
}

.lw-root .back p {
  margin-left: -390px;
  animation: lw-back 200s linear infinite;
}

.lw-root .right p {
  margin-left: -1260px;
  animation: lw-right 200s linear infinite;
}

.lw-root .hue {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  background: radial-gradient(ellipse at center, #1e5799 0, #7db9e8 100%);
  opacity: 1;
  transform: translateZ(20px); 
}

.lw-root .hue.animated {
  animation: lw-filter 8s infinite;
}

.lw-root .container-reflect {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 380px;
  filter: blur(10px);
}

.lw-root .container-reflect .cube {
  perspective-origin: 51% -30%;
}

.lw-root .container-reflect .back {
  transform: translateZ(-435px) rotateY(180deg) scaleX(-1) scaleY(-1);
}

.lw-root .container-reflect .left {
  transform: translateX(-435px) rotateY(-90deg) scaleX(-1) scaleY(-1);
}

.lw-root .container-reflect .right {
  transform: translateX(435px) rotateY(90deg) scaleX(-1) scaleY(-1);
}

.lw-root .container-reflect p {
  transform: scaleY(70%);
}

@keyframes lw-left {
  100% { margin-left: -54000px; }
}

@keyframes lw-back {
  100% { margin-left: -54870px; }
}

@keyframes lw-right {
  100% { margin-left: -55740px; }
}

@keyframes lw-filter {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(100deg); }
}

@keyframes lw-zoom-in {
  0% { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes lw-brightness {
  0% { filter: brightness(1) contrast(1); }
  100% { filter: brightness(0.8) contrast(1.3); }
}