/* ── White Monkey — Corner Walls ── */

.cw-section {
  position: relative;
  background: transparent;
}

.cw-sticky {
  position: sticky;
  top: 0;
  height: 100dvh;   /* hauteur visible — cohérent avec le rendu WebGL (innerHeight) */
  overflow: hidden;
  background: var(--bg);
}

.cw-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Caption — texte centré dans le triangle blanc (desktop).
   left: 40vw → centre du texte ~70% de la largeur, au-dessus du coin 3D
   (edgePosition 0.70). Le texte ne fait qu'~336px → reste loin du bord droit. */
.cw-caption {
  position: absolute;
  top: 0;
  left: 40vw;
  right: 0vw;
  height: 22.5vh;
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'STRRETCH', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 4vh;
  line-height: 1.05;
  text-transform: uppercase;
  color: #1a1a1a;
  text-align: center;
}

/* Grain overlay */
.cw-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Progress bar */
.cw-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0%;
  background: rgba(255, 255, 255, 0.25);
  z-index: 3;
  pointer-events: none;
  transition: none;
}

/* WebGL fallback */
.cw-fallback {
  position: absolute;
  inset: 0;
  display: none;
  background: #1a1a1a;
  align-items: center;
  justify-content: center;
}

.cw-fallback-list {
  list-style: none;
  text-align: center;
}

.cw-fallback-list li {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 8vw, 6rem);
  text-transform: uppercase;
  color: var(--bg);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.cw-no-webgl .cw-canvas,
.cw-no-webgl .cw-grain {
  display: none;
}

.cw-no-webgl .cw-fallback {
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .cw-grain { display: none; }
}