/* DESKTOP */

html,
body {
  /* margin: 0;
  padding: 0; */
  overflow-x: hidden;
}

html, body {
    overscroll-behavior: none; /* prevents pull-to-refresh and bounce scrolling */
    touch-action: pan-x pan-y; /* ensures normal scrolling without overscroll */
    overflow: hidden; /* optional: if you want to fully control scrolling */
}

body {
  background-color: #666;
  overflow-x: hidden;
  overflow-y: hidden;
}

.title-layer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100svh;
  width: calc(100vw - (100vw - 100%));
  /* ← compensates for scrollbar */
  isolation: isolate;
  overflow: hidden;
  position: relative;
}


span {
  position: absolute;
  font-size: 160px;
  scale: 1.8;
  user-select: none;
}

/* visual layers */
#dark {
  color: transparent;
  text-shadow: 1px 4px 4px black;
  z-index: 1;
}

#light {
  color: #666;
  text-shadow: -1px -4px 4px white;
  filter: blur(1.5px);
  z-index: 2;
}

/* MOBILE */

@media (max-width: 760px) {

  body {
    max-height: 90vh;
  }

  span {
    position: absolute;
    font-size: 30vw;
    scale: 1;
    user-select: none;
  }
}

/* TOOLTIP */


.tooltip-target {
  position: relative;
  color: transparent;
  z-index: 3;
  cursor: default;
}

.tooltiptext {
  all: unset;
  position: absolute;
  bottom: 30%;
  left: 90%;
  transform: translateX(-50%);
  background-color: rgba(255, 252, 186, 0.95);
  color: #000000;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 6px;
  line-height: 1.4;
  padding: 1px 3px;
  border-radius: 1px;
  border: 0.05px solid #777777;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease-out, transform 0.2s ease-out;
  z-index: 9999;
  pointer-events: none;
}

.tooltip-target:hover .tooltiptext {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
  transition-delay: 1s;
}