html,
body {
  height: 100%;
  margin: 0;
}

@font-face {
  font-family: "Handoodle";
  src: url("/fonts/Handoodle.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

canvas.webgl {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* so the page scrolls normally */
}

#sections {
  position: relative;
  z-index: 1;
}

.section-panel {
  height: 100vh; /* one viewport tall per section */
  display: flex;
  align-items: flex-start; /* top alignment */
  justify-items: center; /* horizontally centered */
  padding: 2rem;
  font-family: "Handoodle", sans-serif;
  color: #7b797e;
}

@media (min-width: 768px) {
  .section-panel {
    justify-content: flex-start; /* left alignment */
    align-items: center; /* vertically centered */
  }
  .section-panel > .content {
    max-width: 60ch;
    padding-left: clamp(2rem, 8vw, 6rem);
  }
}

@media (max-width: 768px) {
  .section-panel {
    align-items: flex-start; /* top alignment */
    justify-items: center;
  }
  .section-panel > .content {
    max-width: 60ch;
    width: 100%;
  }
}

.section-panel > .content {
  --revealRight: 100%; /* 100% = fully clipped; 0% = fully shown */
  max-width: 100%;
  text-align: center;
  font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem);
  line-height: 1.4;
  display: inline-block;

  /* reveal left→right driven by JS via --revealRight */
  clip-path: inset(0 var(--revealRight) 0 0);

  /* plain opacity; JS will set this */
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .section-panel > .content {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}