.relic-viewer {
  position: relative;
  width: 100%;
  max-height: 800px;
  aspect-ratio: 4 / 3;
  background: transparent;
  border-radius: 6px;
  overflow: hidden;
  /*box-shadow: rgb(139, 21, 56) 0px 0px 22px 0px;
    border-radius: 8px;*/
}

.relic-viewer canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  cursor: grab !important;
}

.relic-viewer canvas:active {
  cursor: grabbing !important;
}

.relic-viewer__hud {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.relic-viewer__btn {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--global-palette3) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  border-radius: 3px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 300ms ease;
}

.relic-viewer__btn:hover,
.relic-viewer__btn:focus {
  border: none !important;
  color: var(--global-palette3) !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

.relic-viewer__btn.is-active {
  border: none !important;
  color: var(--global-palette3) !important;
  background: var(--global-palette-highlight) !important;
}

.relic-viewer__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--global-palette-highlight);
  background: rgba(18, 3, 6, 0.4);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.relic-viewer__loading.is-hidden {
  opacity: 0;
}












.intro-scroll .relic-scroll__text {
	max-width: 540px;
}

/*.intro-scroll .relic-scroll__text-bottom span {
	white-space: pre-line;
}*/

.intro-scroll .relic-scroll__text > * {
	white-space: unset;
}





.relic-scroll {
  position: relative;
  height: var(--relic-scroll-length, 300vh);
  height: var(--relic-scroll-length, 300svh);
}

.relic-scroll__stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* belt-and-suspenders alongside JS's interactive:false */
  /* relic-scroll.js sets the real value every frame based on scroll
     progress (see fadeZone). This is just a safe default so there's
     no flash of full opacity for the one frame before JS's first
     rAF tick runs. */
  opacity: 0;
}

/* Left-side text overlay, sits inside .relic-scroll__stage so it
   fades in/out in lockstep with the canvas automatically. */
.relic-scroll__text {
  position: absolute;
  left: 3%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgb(0 0 0 / 20%);
  padding: 10px;
  backdrop-filter: blur(5px);
}

.relic-scroll__text-bottom span {
  white-space: unset;
}

.relic-scroll__text-bottom {
  position: absolute;
  right: 3%;
  bottom: 3%;
  transform: translateY(-50%);
  max-width: 560px;
  z-index: 2;
  background: rgb(0 0 0 / 20%);
  padding: 10px;
  backdrop-filter: blur(5px);
}

[data-scramble] {
  display: block;
  font-family: 'Courier New', monospace;
  /* keep monospace — proportional
    fonts jitter in width as characters swap during the scramble */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: pre;
}

[data-scramble="title"] {
  font-size: 2em;
  color: var(--global-palette-highlight);
  margin-bottom: 6px;
}

[data-scramble="meta"] {
  font-size: 1em;
  color: var(--global-palette3);
  /*opacity: 0.75;*/
}

/* Modifier on .relic-viewer itself — base .relic-viewer rules
   (canvas positioning, loading overlay, etc.) still apply as-is. */
.relic-viewer--scroll {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
}

.relic-viewer--scroll canvas {
  cursor: default !important;
}

@media (max-width: 767px) {
	[data-scramble="title"] {
  font-size: 1.6em;
}

[data-scramble="meta"] {
  font-size: 0.8em;
}
  .relic-scroll__text-bottom {
    right: 0;
    bottom: 10px;
    margin: 10px;
	  margin-right: 80px;
    max-width: 100%;
	  transform: unset;
  }
	
	.relic-scroll__text span {
		white-space: unset;
	}

  .relic-scroll__text {
    top: 140px;
    left: 0;
    margin: 10px;
    max-width: 100%;
	  transform: unset;
  }
}